The hover function for the image tag isn't working. How can I fix this?
Question
h1{ color:red; font-size: 100px; } img :hover { background-color: gold; } .bacon{ background-color: green; } .broccoli{ background-color: red; } /* .circular{ border-radius: 100%; } */ #heading{ background-color: aquamarine; } /*ignore this. i typed this as stack overflow was giving me this error👉 'It looks like your post is mostly code; please add some more details.'.but there is nothing much to explain about this code.*/
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bacon Fansite</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <h1 id="heading">Love Bacon</h1> <p>bacon, bacon, bacon, bacon, bacon, bacon</p> <p>bacon, bacon, bacon, bacon, bacon, bacon</p> <p>bacon, bacon, bacon, bacon, bacon, bacon</p> <img class="bacon" src="https://emojipedia-us.s3.amazonaws.com/thumbs/240/apple/118/bacon_1f953.png" alt="bacon-img"> <img class="broccoli circular" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/325/broccoli_1f966.png" alt="broccoli-img"> </body> </html>
The hover function for the image tag isn't working. according to the code the background-color of the image has to change to gold on mouse hover but it doesn't happen.
2 answers
solution1
3 2022-06-05 04:26:11
Just remove the space between img and :hover
h1{ color:red; font-size: 100px; } img:hover { background-color: gold; } .bacon{ background-color: green; } .broccoli{ background-color: red; } /* .circular{ border-radius: 100%; } */ #heading{ background-color: aquamarine; } /*ignore this. i typed this as stack overflow was giving me this error👉 'It looks like your post is mostly code; please add some more details.'.but there is nothing much to explain about this code.*/
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bacon Fansite</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <h1 id="heading">Love Bacon</h1> <p>bacon, bacon, bacon, bacon, bacon, bacon</p> <p>bacon, bacon, bacon, bacon, bacon, bacon</p> <p>bacon, bacon, bacon, bacon, bacon, bacon</p> <img class="bacon" src="https://emojipedia-us.s3.amazonaws.com/thumbs/240/apple/118/bacon_1f953.png" alt="bacon-img"> <img class="broccoli circular" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/325/broccoli_1f966.png" alt="broccoli-img"> </body> </html>
solution2
0 2022-06-05 09:10:31
Use this code.
h1{
color:red;
font-size: 100px;
}
img:hover {
background-color: gold;
}
.bacon{
background-color: green;
}
.broccoli{
background-color: red;
}
/*
.circular{
border-radius: 100%;
}
*/
#heading{
background-color: aquamarine;
}
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.
Related Question
How can I fix a jQuery hoverOut function that isn't working?
My delete function isn't working. How do I get it work?
AJAX POST (JQuery) to PHP is not working. How can I fix it?
Neat UX Trick Not working. How can I fix it?
jquery on submit image not working. How to fix it?
CSS hover isn't working with <a> tag
:hover isn't working with styled 'a' tag
How do I fix an onclick that isn't working when I import a JavaScript function into my HTML file
PHP: Program isn't working. I dont understand the error
Can someone explain why my modal isn't working. I think it has to do with my populateEpisodes function because the getEpisodes array is returned fine
Related Tags