如何在悬停在CSS中时显示隐藏的内容 [英] How to show hidden content when hover in CSS

问题描述

由于标题说我想要在悬停图片时显示一个隐藏的范围盒子，但我不能让它工作，所以我希望你们能找出我的错误。

HTML

 < span class =DDAA__bg> 
< h1 class =DDAA__headline>< a href =＃> DANSKDYREVÆRNÅRHUS< / a>< / h1> 
< / span> 
< span class =DDAA__pic> 
< img src =img / DDAA-Logo.pngwidth =980height =200alt =DanskDyrevæ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; 
} 
  

你现在可以看到它是如何工作的， p>

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

解决方案

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

之后写下：

 < script> 
 $（document）.ready（function（）{
 //这里的一切都是在页面加载后完成的
 
 //为特定元素定义hover事件处理程序
 $（。the_hovered_element）。on（'hover'，function（）{
 //显示元素
 $（the_element_to_be_shown）css（display，block ）; 
}）; 
}）; 
< / script> 
  

不要忘记，首先必须将display：none设置为首先隐藏的div，然后显示。也可以使用.fadeIn（slow）;

这样的简单动画代替.css（display，block

As the title says I want to show a hidden span "box" when hovering an image, but I can't get it to work, so I was hoping you guys could figure out my mistake.

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

You can see here how it works now, not as good :/

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

解决方案

First you need to have jQuery installed ( look for jquery.js / jquery.min.js in source code or google for w3c jquery install )

After this you write following :

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

Don't forget that you must initially set display: none to the div that is first hidden and then shown. Also instead of .css("display","block") you can have simple animation like .fadeIn("slow");

这篇关于如何在悬停在CSS中时显示隐藏的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！