在 img 悬停时显示隐藏的 ul答案

【问题标题】：On img hover show hidden ul在 img 悬停时显示隐藏的 ul
【发布时间】：2015-10-27 16:47:37
【问题描述】：

我有一个包含图像和无序列表的 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 解决，但我只是勉强学习它。任何帮助都会很棒！

【问题讨论】：

您的<div> 未关闭。无论如何，你没有工作，如果没有，以什么方式？
Style child element when hover on parent的可能重复
javascript 示例效果很好，除了我无法离开图像图标将鼠标悬停在列表项上（最终它们将成为链接）。有什么想法吗？

标签： css

【解决方案1】：

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

#holder:hover ul{
    display: block;
}

DEMO

注意 - <img> 不会有 </img> 从这个 source 它是无效的，它应该像 <img src="#" alt="some image"/> 一样关闭

【讨论】：

【解决方案2】：

<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 很容易..

【讨论】：

javascript 示例效果很好，除了我无法离开图像图标将鼠标悬停在列表项上（最终它们将成为链接）。有什么想法吗？
简单的$("img").hover(function(){ 到$("#holder").hover(function(){ 明白了吗？
@strasbal 没关系！我们在这里为您提供帮助并获得帮助；）
@strasbal 这与仅使用 CSS 为div 添加悬停效果的其他答案完全相同，您知道。

【解决方案3】：

css

#holder ul {
  display: none;
}

jQuery

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

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

【讨论】：

这太完美了。唯一的问题是，当尝试滚动列表项时，列表会消失。关于如何解决这个问题的任何想法？

【解决方案4】：

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

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

这是使用您的代码的example on JSFiddle。

【讨论】：

对不起，我应该添加更多代码。我只希望悬停在 img 而不是父级上悬停时工作。不过谢谢你的建议！
@strasbal 我更新了我的代码，只用 CSS 就可以完成我认为你想要的事情。但是，如果您希望项目符号保持可见以单击它们，则最好在整个div 上启用悬停，而不仅仅是图像。我在代码中添加了链接进行演示。