HTML CSS3 Jquery 悬停菜单答案

【问题标题】：HTML CSS3 Jquery hover menuHTML CSS3 Jquery 悬停菜单
【发布时间】：2016-06-03 14:33:21
【问题描述】：

我正在尝试构建一个 CSS3 悬停菜单。我想悬停一张图片（比如第一张照片），然后出现我的菜单（比如第二张照片），我还想隐藏第一张图片。最后，如果光标在菜单上，我想保持悬停状态。

源代码：

$("#div-right img").hover(function(){
    $('#div-right a').removeClass('hidden');
    $("#div-right img").css({opacity: "0"});
},function(){
    $('#div-right a').addClass('hidden');
    $("#div-right img").css({opacity: "1"});    
});

<div id="div-right"> 
    <a class="hidden" href="index.html" class="m1">HOME</a> 
    <a class="hidden" href="#" class="m2">ABOUT</a> 
    <a class="hidden" href="#" class="m3">CONTACT</a>
    <img src="images/menu-01.png" style="position:relative; right:30px;"> 
</div>

#div-right a hidden{
    display:none;
}

【问题讨论】：

如果您提供一些信息会更好。例如出了什么问题？你是怎么解决这个问题的？
jsfiddle.net/kv4tujyu/1
它不能正常工作。我无法解决问题。
@was 为什么你不只使用 CSS 来做到这一点？
因为我不能只用 CSS 来做。它不能正常工作..

标签： jquery css menu

【解决方案1】：

您不需要任何 js 代码来执行此操作。改用:hover 伪类：

#div-right{
  display: inline-block;
  /*border added for debug purpose*/
  border: 1px solid rgba(0,0,0,0.1);
  width: auto;
}

#div-right:hover>a{
  font-size: 30px;
  color: black;
  font-weight: bold;
  padding: 5px;
  text-decoration: none;
}

#div-right:hover>img{
  display: none;
}

#div-right:hover>a{
  display: inline-block;
}

#div-right:hover>a:hover{
  text-decoration: underline;
}

#div-right>a{
  display:none;
}

<div id="div-right"> 
  <a class="hidden" href="index.html" class="m1">HOME</a> 
  <a class="hidden" href="#" class="m2">ABOUT</a> 
  <a class="hidden" href="#" class="m3">CONTACT</a>
  <img src="http://i.imgur.com/fitdd0s.png"> 
</div>

【讨论】：

【解决方案2】：

我更改了您的代码的一部分。您可以使用此代码

$("#div-right img, #div-right div").hover(function(){
    $("#div-right").addClass("hover");
},function(){
    $("#div-right").removeClass("hover");   
});

#div-right div {
    display: none;
}

.hover > img {
    opacity: 0.5;
}

.hover > div {
    display: block !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div-right"> 
    <img src="a"> 
    <div>
        <a href="#">HOME</a> 
        <a href="#">ABOUT</a> 
        <a href="#">CONTACT</a>
    </div>
</div>

【讨论】：