2016-07-21 9 views
1

Ich bin neu in CSS und UI Design. Hier ist der Fall. Ich habe ein Div (Divmain). In diesem Divain habe ich ein Bild und ein anderes Div (sub_div). Es gibt Texte innerhalb von sub_div, die ich mit mouse hover anzeigen möchte, ansonsten mit nur css (no javascript/jquery). Bitte schlagen Sie den Ansatz vor, dem ich folgen sollte.Anzeige Div Text auf Maus Hover mit css

Im Moment mache ich so etwas wie:

Html:

<div class="divmain"> 
<img src="" /> 
<div class="sub_div">Some Text</div> 
</div> 

Css:

.divmain .sub_div { 
    height: 70px; 
    opacity: 0; 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    padding: 2px 0px; 
    color: #ffffff; 
    text-decoration: none; 
    vertical-align: middle; 
    text-align: center; 
    -webkit-transition: opacity 500ms; 
    -moz-transition: opacity 500ms; 
    -o-transition: opacity 500ms; 
    transition: opacity 500ms; 
    margin-top: 35px; 
    line-height: 70px; 

} 

.divmain:hover .sub_div { 
    opacity: 0.8; 
} 
+1

Bitte klären Sie Ihr spezielles Problem oder fügen Sie weitere Details helfen, genau zu markieren, was Sie brauchen. Wie es derzeit geschrieben wird, ist es schwer zu sagen, was genau Sie fragen. Was ist mit Ihrer aktuellen Methode, die nicht funktioniert? –

Antwort

3

Die Below-Code sollten Sie helfen:

.divmain{ 
 
width: 200px; 
 
} 
 

 
.sub_div{ 
 
display:none; /* This code hides the text initially */ 
 
/* Your sub_div styles can go here*/ 
 
} 
 

 
.divmain:hover .sub_div{ 
 
    display:block; /*Here we are making the .sub_div visible on hover*/ 
 
}
<div class="divmain"> 
 
<img src="http://wallpapercave.com/wp/EC4hMSt.png" width="200px" height="auto" /> 
 
<div class="sub_div">Some Text</div> 
 
</div>

1

Dies sollten Sie

<div class="divmain"> 
<img src="mrm.gif" alt="Smiley face" /> 
<div class="sub_div">Some Text</div> 
</div> 

.divmain .sub_div { 
     display: none; 
} 

.divmain:hover .sub_div { 
    display: block; 
} 

Click to view CodePen