Показать/скрыть div на JavaScript hover

Question

Я хочу, чтобы наложение изображений (с текстом) отображалось только тогда, когда div зависает. Скрывается по умолчанию. По JavaScript, если подходит.

Я попытался дублировать css, указав первый (display: none), а затем второй с: hover и no (display: none), но не работал, поэтому попробуйте с JavaScript добавить/удалить (display: нет) класс.

Я включил живой 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"); 
     } 
    ); 

Answer 1

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

Fiddle link

Answer 2

попробовать this fiddle. Я использовал его так много времени.

$(document).ready(function() { 
       $(document).on('mouseenter', '.divbutton', function() { 
        $(this).find(":button").show(); 
       }).on('mouseleave', '.divbutton', function() { 
        $(this).find(":button").hide(); 
       }); 
      }); 

просто отредактируйте этот код и поместите свой div вместо кнопки.

Answer 3

Вы ошибаетесь.Пожалуйста, используйте этот инструмент 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); 
} 

Что о чем-то намного легче:

• нет JavaScript требуется,
• меньше дублирования 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 { 
    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; 
} 

Answer 4

#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 на свой сайт. потому что некоторые элементы погружения переполнены. это исправит эту проблему.