[英]Display/Hide a div on JavaScript hover
我希望图像叠加层(带有文本)仅在div悬停时显示。 默认隐藏。 如果适用,通过JavaScript。
我尝试复制css,给第一个(显示:无),然后给第二个:hover和no(显示:无),但是没有用,所以尝试使用JavaScript添加/删除(显示:无)类。
我包含了一个实时URL。 我参考了6个首页图片。
实时网址: http : //bit.ly/1jl1QaT
HTML
<div class="desc"><p><?=((strlen($r_main['friendlyTitle'])>40)?substr($r_main['friendlyTitle'],0,40).'...':$r_main['friendlyTitle']);?></p></div>
</div></a>
<a href="Shopping/"><div class="feature-2">
<div class="header"><p>Shopping</p></div>
<div class="desc"><p>Grab yourself a pair of Mink Fur Eyelashes for only £19.95 </p></div>
</div></a>
CSS
#content-mid .col-2 .features .feature-1 .desc, #content-mid .col-2 .features .feature-2 .desc, #content-mid .col-2 .features .feature-3 .desc, #content-mid .col-2 .features .feature-4 .desc, #content-mid .col-2 .features .feature-5 .desc, #content-mid .col-2 .features .feature-6 .desc { position:absolute; width: 220px; height: 50px zoom: 1; filter: alpha(opacity=90); opacity: 0.9; background: #333; bottom: 0; margin-bottom: 5px; display: none; }
#content-mid .col-2 .features .feature-1 .desc, #content-mid .col-2 .features .feature-2 .desc, #content-mid .col-2 .features .feature-3 .desc, #content-mid .col-2 .features .feature-4 .desc, #content-mid .col-2 .features .feature-5 .desc, #content-mid .col-2 .features .feature-6 .desc-show { position:absolute; width: 220px; height: 50px zoom: 1; filter: alpha(opacity=90); opacity: 0.9; background: #333; bottom: 0; margin-bottom: 5px; }
JavaScript的
$(".desc").hover(
function () {
$(this).removeClass("desc-show");
},
function () {
$(this).addClass("desc");
}
);
HTML
<div style="background-color:red;">
<div id="blah">DEMO TEXT ON MOUSE OVER</div>
</div>
JAVA脚本
$('#blah').hover(function() {
$(this).fadeTo(1,1);
},function() {
$(this).fadeTo(1,0);
});
CSS
#blah {
width:100px;
height:100px;
background-color:green;
visibility: visible;
opacity:0;
filter:alpha(opacity=0);
}
#content-mid .col-2 .features .feature-1{
border: 1px solid #E5E5E5;
float: left;
height: 160px;
overflow: hidden;
padding: 5px;
position: relative;
width: 220px;
z-index:-1;
}
#content-mid .col-2 .features .image_holder_home_page{
height: 160px;
overflow: hidden;
position: relative;
width: 220px;
}
#content-mid .col-2 .features .feature-1 .header{
background: none repeat scroll 0 0 #0098FF;
height: 30px;
position: absolute;
width: 95.5%;
}
请将以上CSS代码添加到您的网站中。 因为某些潜水元素正在溢出。 这将解决该问题。
试试这个小提琴 。 我已经用了很多次了。
$(document).ready(function () {
$(document).on('mouseenter', '.divbutton', function () {
$(this).find(":button").show();
}).on('mouseleave', '.divbutton', function () {
$(this).find(":button").hide();
});
});
只需编辑此代码,然后将div代替按钮即可。
您是CSS错误。 请使用此工具http://csslisible.com/en/使其能够被人类阅读,您将明白我所说的“错误”是什么意思:
#content-mid .col-2 .features .feature-1 .desc, #content-mid .col-2 .features .feature-2 .desc, #content-mid .col-2 .features .feature-3 .desc, #content-mid .col-2 .features .feature-4 .desc, #content-mid .col-2 .features .feature-5 .desc, #content-mid .col-2 .features .feature-6 .desc { display: none; position: absolute; bottom: 0; width: 220px; height: 50px zoom; margin-bottom: 5px; opacity: 0.9; background: #333; filter: alpha(opacity=90); } #content-mid .col-2 .features .feature-1 .desc, /* #TIP#: this is here */ #content-mid .col-2 .features .feature-2 .desc, /* #TIP#: this is here */ #content-mid .col-2 .features .feature-3 .desc, /* #TIP#: this is here */ #content-mid .col-2 .features .feature-4 .desc, /* #TIP#: this is here */ #content-mid .col-2 .features .feature-5 .desc, /* #TIP#: this is here */ #content-mid .col-2 .features .feature-6 .desc-show { position: absolute; bottom: 0; width: 220px; height: 50px zoom; margin-bottom: 5px; opacity: 0.9; background: #333; filter: alpha(opacity=90); }
那么更简单的方法呢:
#content-mid .col-2 .features .feature-1 .desc, #content-mid .col-2 .features .feature-2 .desc, #content-mid .col-2 .features .feature-3 .desc, #content-mid .col-2 .features .feature-4 .desc, #content-mid .col-2 .features .feature-5 .desc, #content-mid .col-2 .features .feature-6 .desc { display: none; position: absolute; bottom: 0; width: 220px; height: 50px zoom; margin-bottom: 5px; opacity: 0.9; background: #333; filter: alpha(opacity=90); } #content-mid .col-2 .features .feature-1:hover .desc, #content-mid .col-2 .features .feature-2:hover .desc, #content-mid .col-2 .features .feature-3:hover .desc, #content-mid .col-2 .features .feature-4:hover .desc, #content-mid .col-2 .features .feature-5:hover .desc, #content-mid .col-2 .features .feature-6:hover .desc { display: block; }
编辑:这是JSFiddle上的一个示例http://jsfiddle.net/pomeh/9XX46/
编码:
HTML:
<div class="features">
<a href="Podcasts/">
<div class="feature feature-1">
<div class="header"><p>Podcasts</p></div>
<div class="image_holder_home_page">
<img src="http://lorempixel.com/220/159/city" />
</div>
<div class="desc"><p>Podcast Simple Page</p></div>
</div>
</a>
<a href="Shopping/">
<div class="feature feature-2">
<div class="header"><p>Shopping</p></div>
<div class="image_holder_home_page">
<img src="http://lorempixel.com/220/159/food" />
</div>
<div class="desc"><p>Grab yourself a pair of Mink Fur Eyelashes for only £19.95 </p></div>
</div>
</a>
<a href="Confessions/">
<div class="feature feature-3">
<div class="header"><p>Confessions</p></div>
<div class="image_holder_home_page">
<img src="http://lorempixel.com/220/159/sports" />
</div>
<div class="desc"><p>tttttttttttttttt</p></div>
</div>
</a>
</div>
CSS:
.features .feature { width: 220px; height: 50px zoom; margin-bottom: 5px; position: relative; } p { padding: 0; margin: 0; } .features .feature .header { width: 100%; text-transform: uppercase; color: white; margin: 0; } .features .feature-1 .header { background-color: blue; } .features .feature-2 .header { background-color: red; } .features .feature-3 .header { background-color: green; } .features .feature .desc { display: none; opacity: 0.9; background: #333; width: 220px; filter: alpha(opacity=90); margin: 0; padding: 0; position: absolute; bottom: 5px; } .features .feature:hover .desc { display: block; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.