Question

我有一个包含图像和无序列表的div。

<div id="holder">
  <img src="#" alt="some image"></img>
  <ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
  </ul>

我希望隐藏无序列表，直到div悬停在上面。我目前拥有的CSS是：

#holder {width: 100%;}

#holder > img {width: 100px; height: 100px;}

#holder > ul {display: none;}

#holder > ul:hover {display: block;}

我很确定这可以通过javascript解决，但我只是勉强学习它。任何帮助都会很棒！

Answer 1

您可以使用CSS执行此操作，如下所示：

#holder:hover ul{
    display: block;
}

<强> DEMO

注意 - <img>没有</img>来自此 source ，它无效，应该像<img src="#" alt="some image"/>
一样关闭

Answer 2

您需要将:hover属性添加到要激活更改的元素，然后将子元素（在本例中为ul）添加到选择器，如下所示：

#parent:hover child {
    /* css here */
}

以下是使用您的代码的example on JSFiddle。

Answer 3

CSS

#holder ul {
  display: none;
}

Jquery的

$("#holder").mouseover(function(){
    $("#holder ul").show();
});

 $("#holder").mouseout(function(){
    $("#holder ul").hide();
});

Answer 4

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
 $("#holder ul").hide();
 $("img").hover(function(){
   $("#holder ul").show();
   },function(){
   $("#holder ul").hide();
   });
});
</script>
    <div id="holder">
      <img src="#" alt="some image">
      <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
        <li>List Item 3</li>
      </ul></div>

您在搜索的是这里。使用JQuery很容易..

关于img hover show hidden ul

4 个答案: