How can I add a hover effect to the img
after mouse is over link Text
using CSS?
<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>
Change your HTML markup and put both, icon and text into one link.
<h2>
<a>
<img ...>
TEXT
</a>
</h2>
Than you can use simply
a:hover {color: red;} /* red text 'TEXT' */
a:hover img {border: 1px solid green}
Try adding some JavaScript. In my case i added html attribute onmouseover and onmouseleave to call a javascript function. fun1 on hover and fun 2 onleave. I added id hover on my image and i said on each function to get the element of the id hover which is my image and change the backgroundColor='blue'. On hover i set it to blue and onleave i set it to red. You can change other elements like the src by doing style.src='here/put/the/image/source/img.png' and add different src on hover or leave. If you need more info leave a comment. Did this help?
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>
-------- Or by doing this without script tag or file --------
#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>
Since h2
and p
are siblings but you want to add hover on h2 img
which is before p
, you cannot do it with CSS. You need 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 = '';
}
}
you could declare:
.myTextContainer a:hover img {
// your CSS
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.