更改懸停的文本內容

Question

我有一個div與圖像作爲背景圖像。

在圖像上我有一個h2元素在左上角。

我想要做的是，當我將鼠標懸停在div我想在左上角的h2消失，新的h2用不同的文字應該會出現在div的中間。

我可以弄清楚自己的位置，但我只是想知道如何根據懸停來顯示/顯示這些標題？

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>