如何在 CSS 中悬停时显示隐藏的内容答案

【问题标题】：How to show hidden content when hover in CSS如何在 CSS 中悬停时显示隐藏的内容
【发布时间】：2014-10-11 20:19:47
【问题描述】：

正如标题所说，我想在悬停图像时显示一个隐藏的跨度“框”，但我无法让它工作，所以我希望你们能找出我的错误。

HTML

<span class="DDAA__bg">
<h1 class="DDAA__headline"><a href="#">DANSK DYREVÆRN ÅRHUS</a></h1>
</span>
<span class="DDAA__pic">
<img src="img/DDAA-Logo.png" width="980" height="200"  alt="Dansk Dyreværn Århus"/>
</span>

CSS

span.DDAA__bg{
  height: 200px;
  width: 980px;
  background-color: #666;
  position: absolute;
  display: none;
}

span.DDAA__pic{
   display:block;
   visibility: visible;
}

span.DDAA__pic:hover{
   visibility: hidden;
   transition-delay: 2s;
}

span.DDAA__pic:hover + span.DDAA__bg{
   display:block;
}

你可以在这里看到它现在是如何工作的，不是那么好：/

http://jsfiddle.net/ary3bt83/3/

【问题讨论】：

不相关，但你不应该将像标题这样的块元素放在像跨度这样的内联元素中。
您不能使用 CSS 选择 DOM 中更高的元素，因此除非您更改源顺序，否则您的选择将永远不会起作用。
我仍然是编码方面的业余爱好者，但很高兴知道 :) 你会如何设置它？
取决于您的实际要求，但 - jsfiddle.net/ary3bt83/6
其实还不错，虽然盒子应该在图片的顶部，但我用一些边距固定它（只有这样我才真正知道怎么做:D）但看起来像这样好吧jsfiddle.net/ary3bt83/8但是又出现了一个新问题，每次移动鼠标都会闪烁，你知道怎么停止吗？

标签： html css hover show hidden

【解决方案1】：

element:hover > other_element {
 display: block;
}

这等于 jQuery 代码

 $(element).on('hover', function() { $(this).css("display", "block"); });

但有时在 css 上进行悬停确实是错误的......

【讨论】：

element_which_will_be_hovered:hover > element_affect { //style } ... 很简单
你能不能给我一个例子，也许改变我链接到的 jsfiddle，抱歉耽误了你的时间，但以前从未尝试过这种代码，而且很迷茫，即使你做了很清楚：D
感谢它完美运行！但是当您在要显示的元素上移动光标时，它会闪烁，并且每次单击它时它都会消失，您可能知道如何解决这个问题？
我认为这是浏览器的错误，在 Chrome 中是可以的。但是这个hover真的很有限，你也不能触发其他事件，这就是你使用jQuery的原因，如果你想要jQuery代码，我也可以写一个描述的答案......
jQuery 是编写代码所需的基本工具。我建议你至少学习最基本的（我的意思是最简单的处理程序和函数，而不是对象式编程和模式）。因为css基本上是为动画设置颜色和javascript这个颜色和whateve :) 希望你理解我。虽然如果这是一次性问题，使用 CSS 是可能的，但作为一名优秀的开发人员，我不会这样做。

【解决方案2】：

首先您需要安装 jQuery（在源代码中查找 jquery.js / jquery.min.js 或在 google 中查找 w3c jquery 安装）

在此之后，您编写以下内容：

<script>
$(document).ready(function() {
// everything here is done once the page is loaded

// define hover event handler for a specific element
$(".the_hovered_element").on('hover', function() {
   // show the element 
   $(".the_element_to_be_shown").css("display","block");
});
});
</script>

不要忘记，您必须首先将 display: none 设置为首先隐藏然后显示的 div。此外，您可以使用 .fadeIn("slow"); 之类的简单动画来代替 .css("display","block");

【讨论】：

很好，但它是如何工作的，我是否将代码放在我的 html、css 中，甚至制作它所引用的新文档？ PS - 今天好久没上网了，以后联系你可以吗？ :)
很遗憾，我总是没有时间，所以让我们留在这里吧。你可以将它写在 html 代码中，最好在所有内容加载后写在页脚中，或者如果它更长更复杂，只需在没有的示例 .js 文件中> 标签，然后包含在 html 中作为脚本 src=""
好的，感谢您的帮助！为我节省了几个小时的研究时间；）