Question

我一直试图让元素（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的孩子也不是孩子B. A的id = #cimsgContainer; B的id = #userLogo 谢谢

Answer 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/）

Answer 2

<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>

似乎适合我。

这是你想要的吗？

jQuery .hover更改不是子元素的css

2 个答案: