I want to active the same hover by two different ways-CodePudding

This is my HTML code

> <div >
> 
>         <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(){
>        })

CodePudding user response：

If your aim is to highlight the next li element, you can use the CSS selector element element:

li:hover {
color:red;
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1 9kLp vbbpoDh 6TklxBeAi9TL0taeWpdmZzQDry0AcO jQ12RyohqqoYoo8RDwJrU qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl TvuiRW1m3n0eDl0vRPcEysqdXn jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R h6rYSUb3ekokRY6f/YukArN979jcW V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2 D3P 4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ gqjk8VWFYmHrwBzW/n uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t 2nNu5sxxpDFNx huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw /wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=');
}

img:hover   li {
color:red;
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1 9kLp vbbpoDh 6TklxBeAi9TL0taeWpdmZzQDry0AcO jQ12RyohqqoYoo8RDwJrU qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl TvuiRW1m3n0eDl0vRPcEysqdXn jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R h6rYSUb3ekokRY6f/YukArN979jcW V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2 D3P 4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ gqjk8VWFYmHrwBzW/n uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t 2nNu5sxxpDFNx huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw /wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=');
}

<li>item</li><li>item</li><br>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1 9kLp vbbpoDh 6TklxBeAi9TL0taeWpdmZzQDry0AcO jQ12RyohqqoYoo8RDwJrU qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl TvuiRW1m3n0eDl0vRPcEysqdXn jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R h6rYSUb3ekokRY6f/YukArN979jcW V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2 D3P 4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ gqjk8VWFYmHrwBzW/n uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t 2nNu5sxxpDFNx huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw /wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII="
>
<li>item</li><br>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1 9kLp vbbpoDh 6TklxBeAi9TL0taeWpdmZzQDry0AcO jQ12RyohqqoYoo8RDwJrU qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl TvuiRW1m3n0eDl0vRPcEysqdXn jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R h6rYSUb3ekokRY6f/YukArN979jcW V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2 D3P 4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ gqjk8VWFYmHrwBzW/n uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t 2nNu5sxxpDFNx huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw /wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII="
>
<li>item</li><br><li>item</li><li>item</li>

However if you want to select the previous element in the code, that would be impossible in CSS (well there is a way :has CSS 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 using float or display: flex flex-direction: row-reverse:

li:hover {
color:red;
}

img:hover   li {
color:red;
}

.container {
width:100px
}

<div class='container'>
<li>item</li><li>item</li><br>
<img style='float:right' src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1 9kLp vbbpoDh 6TklxBeAi9TL0taeWpdmZzQDry0AcO jQ12RyohqqoYoo8RDwJrU qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl TvuiRW1m3n0eDl0vRPcEysqdXn jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R h6rYSUb3ekokRY6f/YukArN979jcW V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2 D3P 4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ gqjk8VWFYmHrwBzW/n uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t 2nNu5sxxpDFNx huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw /wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII="
>
<li>item</li><br><li>item</li><li>item</li></div>

A simpler solution would be to just let the image inside the li element:

li:hover {
color:red;
outline:2px solid red;
}

img {
position:absolute;
margin-left: 5px
}

<div id='container'style='width:60px'>
<li>item</li>
<li>item<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1 9kLp vbbpoDh 6TklxBeAi9TL0taeWpdmZzQDry0AcO jQ12RyohqqoYoo8RDwJrU qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl TvuiRW1m3n0eDl0vRPcEysqdXn jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R h6rYSUb3ekokRY6f/YukArN979jcW V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2 D3P 4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ gqjk8VWFYmHrwBzW/n uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t 2nNu5sxxpDFNx huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw /wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII="
></li>
<li>item</li><li>item</li><li>item</li></div>

CodePudding user response：

for example:

img:hover li{
   ...
}

If li is inside img, use the above code.

else, use the below code:

img:hover ~ li{
   ...
}

In the examples above, if the mouse moves to img, the events described for li occur