Question

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

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/

Answer 1

element:hover > other_element {
 display: block;
}

这等于jQuery代码

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

但是，有时候在css上盘旋是非常错误的......

Answer 2

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

在此之后你写下以下内容：

<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”）。

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

2 个答案: