如何將懸停效果添加到放置在父容器中的img

如何在鼠標懸停後使用CSS添加懸停效果至imgText使用CSS？如何將懸停效果添加到放置在父容器中的img

<div class="myTextContainer"> 
    <p> 
     <a href="#"> 
      <img height="128" width="128" title="icon1" alt="icon1" src="icon1.png" "> 
     </a> 
    </p> 
    <h2> 
     <a href="#">Text</a> 
    </h2> 
</div>

來源

2015-05-28 Tomasz

在CSS中不可能定位父代或以前的兄弟元素。將圖片和「文字」放到一個鏈接中。 – panther

看看我的帖子，剛剛更新... :) –

嘗試增加一些JavaScript。在我的情況下，我添加了html屬性onmouseover和onmouseleave來調用一個javascript函數。在懸停和樂趣2 onleave fun1。我在我的圖像上添加了id懸停，並且我在每個函數上都說明了id懸停的元素，它是我的圖像，並更改backgroundColor ='blue'。懸停時，我將它設置爲藍色，並將其設置爲紅色。您可以通過執行style.src ='here/put/the/image/source/img.png'來更改其他元素，如src，並在懸停或離開時添加不同的src。如果您需要更多信息請發表評論。這有幫助嗎？

function fun1(){ 
 
    document.getElementById("hover").style.backgroundColor='blue'; 
 
} 
 
function fun2(){ 
 
    document.getElementById("hover").style.backgroundColor='red'; 
 
}

#hover{ 
 
background-color:red; 
 
}

<div class="myTextContainer"> 
 
    
 
     <a href="#"> 
 
      <img id="hover" height="128" width="128" title="icon1" alt="icon1" src="icon1.png"> 
 
     </a> 
 
    
 
    <h2> 
 
     <a href="#" onmouseover="fun1()" onmouseleave="fun2()">Text</a> 
 
    </h2> 
 
</div>

--------或者做這個沒有腳本標記或文件--------

#hover{ 
 
background-color:red; 
 
}

<div class="myTextContainer"> 
 
    <p> 
 
     <a href="#"> 
 
      <img id="hover" height="128" width="128" title="icon1" alt="icon1" src="icon1.png"> 
 
     </a> 
 
    </p> 
 
    <h2> 
 
     <a href="#" onmouseover="document.getElementById('hover').style.backgroundColor='blue';" onmouseleave="document.getElementById('hover').style.backgroundColor='red';">Text</a> 
 
    </h2> 
 
</div>

來源

2015-05-28 08:58:09

-1

你可以聲明：

.myTextContainer a:hover img { 
// your CSS 
}

來源

2015-05-28 08:09:07

問題是關於'文本'超鏈接。不是包含圖像的人。你不能去css中的以前的兄弟姐妹。 – mehulmpt

'img'不在'h2'中。上面的CSS不起作用。 –

@MehulMohan：你說得對 –

由於h2和p是兄弟，但你要在h2 img這是p前加懸停，你不能用CSS做。您需要javascript：

document.querySelectorAll('a')[1].addEventListener('mouseover', fn, false); 
document.querySelectorAll('a')[1].addEventListener('mouseout', fn2, false); 
function fn(e) { 
if(e.target.innerHTML == 'Text') { 
    document.querySelector('img[src="icon1.png"]').className = 'hover'; 
} 
} 
function fn2(e) { 
if(e.target.innerHTML == 'Text') { 
    document.querySelector('img[src="icon.png"]').className = ''; 
} 
}

來源

2015-05-28 08:14:08 mehulmpt

更改您的HTML標記並將兩者，圖標和文本放入一個鏈接。

<h2> 
    <a> 
     <img ...> 
     TEXT 
    </a> 
</h2>

比你可以使用簡單的

a:hover {color: red;} /* red text 'TEXT' */ 
a:hover img {border: 1px solid green}

來源

2015-05-28 08:19:08 panther

如何將懸停效果添加到放置在父容器中的img

回答

相關問題