Я хочу, чтобы наложение изображений (с текстом) отображалось только при зависании div. Скрывается по умолчанию. По JavaScript, если подходит.
Я попытался дублировать css, давая первый (display: none), а затем второй с: hover и no (display: none), но не работал, поэтому попробуйте с JavaScript добавить/удалить класс (display: none).
Я включил живой URL. Я возвращаюсь к 6 домашним изображениям.
Прямой URL: 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-SCRIPT
$('#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 на свой сайт. потому что некоторые элементы погружения переполнены. это исправит эту проблему.
Вы 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; }
EDIT: Здесь пример на 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; }
попробуйте эту скрипку. Я использовал его так много времени.
$(document).ready(function () {
$(document).on('mouseenter', '.divbutton', function () {
$(this).find(":button").show();
}).on('mouseleave', '.divbutton', function () {
$(this).find(":button").hide();
});
});
просто отредактируйте этот код и поместите свой div вместо кнопки.