This is my HTML code
> <div class="main">
>
> <figure>
> <img src ="img/estanteria.jpg" alt="library" width="300"
> height="300" id="estanteria"> <a href="collection.html">
> <li>My Collection</li></a>
> </figure>
> <figure>
> <img src ="img/archivador.jpg" alt="Edit Collection"
> width="300" height="300" id="archivador"> <a href="edit.html">
> <li>Edit Collection</li></a>
> </figure>
> <figure>
> <img src ="img/contact.jfif" alt="Contact me" width="300"
> height="300" id = "contact"> <a href="contact.html">
> <li>Contact me</li></a>
> </figure>
This is the CSS code inside each "li"
> li {
> padding: 1rem 2rem 1.15rem;
> text-transform: uppercase;
> cursor: pointer;
> color: #ebebeb;
> min-width: 80px;
> margin: auto;
> text-align:center;
> font-family:Arial;
> font-size: 1em;
> } li:hover {
> background-
> image:url('https://scottyzen.sirv.com/Images/v/button.png');
> background-size: 100% 100%;
> color: #27262c;
> animation: spring 1200ms ease-out;
> text-shadow: 0 -1px 0 #ef816c;
> font-weight: bold;
> } li:active {
> transform: translateY(4px);
My Javascript code is not completed. As title says, im looking to active the same hover by two ways. 1 ) Putting the mouse over the regular hover which works and 2 ) Active the last hover when my mouse is over my img instead the "li"
> let estanteria = document.getElementById("estanteria"); let archivador
> = document.getElementById("archivador"); let contact =
> document.getElementById("contact");
>
> //Now, we need to add an Event Listener to listen when the image gets
> mouse over.
>
> estanteria.addEventListener('mouseover', function(){
> }) estanteria.addEventListener('mouseout', function(){
> })
2
Answers
for example:
If
liis insideimg, use the above code.else, use the below code:
In the examples above, if the mouse moves to
img, the events described forlioccurIf your aim is to highlight the next
lielement, you can use the CSS selectorelement+element:However if you want to select the previous element in the code, that would be impossible in CSS (well there is a way
:hasCSS pseudo-class however it won’t work in some browsers so its currently not recommended). So to highlight the previous one you would need to let one after other in the code and manage the style in a way to switch their visual positions on the page somehow, for example usingfloatordisplay: flex+flex-direction: row-reverse:A simpler solution would be to just let the image inside the
lielement: