ホバーのテキストコンテンツを変更する

Question

私はdivに画像を背景画像として持っています。

画像には、左上隅にh2という要素があります。私は私が消えて左上隅にあるh2をしたいdivとdivの中央に表示されます別のテキストを持つ新しいh2にカーソルを合わせると、私は何をしようとしている

です。

私は自分自身でポジショニングを理解することができましたが、ホバーに基づいてこれらの見出しの表示/表示をどのように行うのでしょうか？

Answer 1

間違いなくには、このような簡単な作業のためにJSは必要ありません。

これは、すべてのボックスの親にCSS :hoverを使用して行うことができます。

.box { 
 
    position: relative; 
 
    height: 200px; 
 
    background: #0bf; 
 
} 
 
.title1, 
 
.title2 { 
 
    transition: 0.3s; 
 
} 
 
.title2 { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    /* HIDE SECOND TITLE */ 
 
    opacity: 0; 
 
} 
 

 
/* WHEN BOX IS HOVERED SWAP TITLES */ 
 
.box:hover .title1 { 
 
    opacity: 0; 
 
} 
 
.box:hover .title2 { 
 
    opacity: 1; 
 
}

<div class="box"> 
 
    <h2 class="title1">Some title 1</h2> 
 
    <h2 class="title2">THIS IS COOL</h2> 
 
</div>

Answer 2

ピュアCSSソリューション：

div { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: url('http://via.placeholder.com/100x100') no-repeat center center; 
 
    background-size: cover; 
 
} 
 

 
div:after { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    content: "Hello"; 
 
} 
 

 
div:hover:after { 
 
    content: "World!"; 
 
}

<div></div>