问题描述
由于标题说我想要在悬停图片时显示一个隐藏的范围盒子,但我不能让它工作,所以我希望你们能找出我的错误。
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,blockAs 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");