0

我一直在尝试使一个元素（A）的显示阻塞，当另一个元素（B）将鼠标悬停在它上面时，然后在鼠标离开 A 后将其返回为无，这是我迄今为止的尝试：

首先这里是 HTML 的一部分

..
<ul>
<li class="firstli">
       <img class="userLogo" src="media/images/eSahara.jpg"><a href="">Configurer</a></li>
       <li><a href="" class="clear">Supprimer</a></li>
       <li><a href="logout">Déconnecter</a></li>
</ul>
      </li>                    
          </ul>
<div id="cimsgContainer"><p>Changer votre <br> image de profile</p></div>

现在我的尝试

<script type="text/javascript">
$(".userLogo").mouseenter(function(){$("#cimsgContainer").css("display","block");});
$(".userLogo").mouseleave(function(){$("#cimsgContainer").css("display","none");});
</script>


<script type="text/javascript">
    $(".userLogo").hover(function(){$("#cimsgContainer").css("display","block");},function(){$(this).css("display","none");});
    </script>

非常重要的说明：我已经进行了研究，我发现的只是在父项悬停时更改子项的 CSS，在我的情况下，B 不是 A 的子项，A 也不是 B 的子项。A 的 id = #cimsgContainer; B 的 id = #userLogo 谢谢

4

2 回答 2

1

#target将选择带有id=target.

.target将选择所有带有class=target.

您需要使用类选择器正确定位您的图像。$(".userLogo")

此外，也许您希望徽标之后的元素在悬停时显示，而不是在其他情况下显示？在这种情况下，你可以尝试这样的事情：

$(".userLogo").hover(
  function(){$(this).next().show()},
  function(){$(this).next().hide()}
);

这是jsFiddle Demo该场景的一个

或更简单地说： $(".userLogo").hover(function({$(this).next().toggle()});（http://jsfiddle.net/3gPHR/2/）

于 2013-04-28T20:06:43.023 回答
1 
<ul>
<li class="firstli">
       <img class="userLogo" src="media/images/eSahara.jpg"><a href="">Configurer</a></li>
       <li><a href="" class="clear">Supprimer</a></li>
       <li><a href="logout">Déconnecter</a></li>
</ul>
      </li>                    
          </ul>
<div id="cimsgContainer"><p>Changer votre <br> image de profile</p></div>
<script>
$(".userLogo").hover(function(){ $("#cimsgContainer").css("display", "block"); }, function(){ $("#cimsgContainer").css("display", "none");});
</script>

似乎为我工作。

这是你想要的吗？

于 2013-04-28T20:15:17.363 回答