画像を隠すときに画像を非表示にしたいときに

Question

画像の上にカーソルを置いて、画像の代わりにテキストを表示したいのですが、jQueryやJavaScriptを使用したくありません。

#wrapper .text { 
 
    position: relative; 
 
    bottom: 30px; 
 
    left: 0px; 
 
    visibility: hidden; 
 
} 
 
#wrapper:hover .text { 
 
    visibility: visible; 
 
}

<div id="wrapper"> 
 
    <img src="kero.png" class="hover" height="200px" width="200px/> 
 
    <p class="text">text</p> 
 
</div>​

Answer 1

ない私はあなたが望むものを正確に理解し、しかし、あなたのために、この作業を行う場合には必ず？

初期ケース

#wrapper { 
 
    position: relative; 
 
} 
 

 
.text { 
 
    opacity: 0; 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 

 
.hover:hover { 
 
    opacity: 0; 
 
} 
 

 
.hover:hover + .text { 
 
    opacity: 1; 
 
}

<div id="wrapper"> 
 
    <img src="http://placehold.it/200x200" class="hover" /> 
 
    <p class="text">text</p> 
 
</div>​

拡張ケース

#wrapper { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.text { 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    transition: opacity .5s; 
 
    background: rgba(0, 0, 0, .5); 
 
    color: white; 
 
    margin: 0; 
 
    padding: 10px; 
 
} 
 

 
.hover { 
 
    display: block; 
 
} 
 

 
#wrapper:hover .text { 
 
    opacity: 1; 
 
}

<div id="wrapper"> 
 
    <img src="http://placehold.it/200x200" class="hover" /> 
 
    <p class="text">text</p> 
 
</div>​

Answer 2

これを見て、 http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover

は、これは "ホバー" の一例です。

これがあなたを助けるかどうか教えてください。

Answer 3

の作業フィドル

ありがとう：https://jsfiddle.net/2y67zerm/ Uはdisplayまたはvisibilityのいずれかを使用することができます。これは、ディスプレイのCSS属性を使用して達成することができる

#wrapper .text { 
 
    position: absolute; 
 
    bottom: 30px; 
 
    left: 10px; 
 
    top:10px; 
 
    visibility: hidden; 
 
    display:none; 
 
} 
 
#wrapper:hover .text { 
 
    visibility: visible; 
 
    display:block; 
 
    z-index:1000; 
 
}

<div id="wrapper"> 
 
    <img src="kero.png" class="hover" height="200px" width="200px" /> 
 
    <p class="text">text</p> 
 
</div>​

Answer 4

属性。

#wrapper p { display: none; } 
#wrapper:hover img { display: none; } 
#wrapper:hover p { display: block; } 

あなたの例には不要なクラスがあり、削除されています。

ソリューション：

<style> 
    #wrapper p { display: none; } 
    #wrapper:hover img { display: none; } 
    #wrapper:hover p { display: block; } 
</style> 

<div id="wrapper"> 
    <img src="http://i.imgur.com/UHqk6nC.jpg" /> 
    <p>Some text</p> 
</div> 

例えば、このフィドルを参照してください。役立ちますhttps://jsfiddle.net/nt5vjywu/

願っています！

更新日：

フィーリングが上に浮かび上がるように更新されました。 imgとpタグの並び順に注意してください。

https://jsfiddle.net/nt5vjywu/2/

Answer 5

#wrapper{ 
     position:relative; 
    } 
    #wrapper .text { 
     position: absolute; 
     bottom: 30px; 
     left: 0px; 
     visibility: hidden; 
    } 
    #wrapper:hover .text { 
     visibility: visible; 
    } 
    #wrapper:hover img{ 
     visibility: hidden; 
    }