将鼠标悬停在列表元素上时显示图像

Question

"Hi guys. I want to that the image-modal-1 in the modal-images container shows up when I hover on the first li element on the nav-modal-links container. I tried everything but the image won't show up. What can I do?"

 * { margin: 0; padding: 0; box-sizing: border-box; } button { padding: 10px; }.modal { display: flex; justify-content: center; align-items: center; position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.8); }.modal-content { width: 80%; height: 80%; background: #fff; border-radius: 10px; }.modal-images { position: relative; width: 50%; height: 100%; float: left; }.modal-images img { position: absolute; width: 100%; height: inherit; }.image-modal-1 { position: absolute; display: none; }.image-modal-2 { position: absolute; display: none; }.image-modal-3 { position: absolute; display: none; }.image-modal-4 { position: absolute; display: none; }.nav-modal-links { display: flex; justify-content: center; align-items: center; width: 50%; height: 100%; float: right; }.nav-modal-links ul { list-style: none; font-size: 2em; font-family: Verdana, Geneva, Tahoma, sans-serif; }.nav-modal-links ul li { margin-bottom: 40px; cursor: pointer; }.nav-modal-links ul li:first-child:hover.modal-images.image-modal-1 { display: block; }

 <h1>Modal Demo</h1> <button>Click Here.</button> <div class="modal"> <div class="modal-content"> <div class="modal-images"> <img class="image-modal-1" src="images/modal-image.jpg" alt="img1"> <img class="image-modal-2" src="images/image-modal-2.jpg" alt="img2"> <img class="image-modal-3" src="images/image-modal-3.jpg" alt="img3"> <img class="image-modal-4" src="images/image-modal-4.jpg" alt="img4"> </div> <div class="nav-modal-links"> <ul> <li>First Image</li> <li>Second Image</li> <li>Third Image</li> <li>Fourth Image</li> </ul> </div> </div> </div> <script src="script.js"></script>

"I want to display.image-modal-1 when i hover on the first li element of nav-modal-links"

Answer 1

It doesn't work because .modal-images.image-modal-1 isn't a child of .nav-modal-links ul li .

The easiest way is to use the:has() pseudo class (but beware this isn't supported on firefox). Alternatively you might be able to use the adjacent sibling selector and use css grid to put the elements where you want them.

Solution using :has() below

 * { margin: 0; padding: 0; box-sizing: border-box; } button { padding: 10px; }.modal { display: flex; justify-content: center; align-items: center; position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.8); }.modal-content { width: 80%; height: 80%; background: #fff; border-radius: 10px; }.modal-images { position: relative; width: 50%; height: 100%; float: left; }.modal-images img { position: absolute; width: 100%; height: inherit; }.image-modal-1 { position: absolute; display: none; }.image-modal-2 { position: absolute; display: none; }.image-modal-3 { position: absolute; display: none; }.image-modal-4 { position: absolute; display: none; }.nav-modal-links { display: flex; justify-content: center; align-items: center; width: 50%; height: 100%; float: right; }.nav-modal-links ul { list-style: none; font-size: 2em; font-family: Verdana, Geneva, Tahoma, sans-serif; }.nav-modal-links ul li { margin-bottom: 40px; cursor: pointer; } * { margin: 0; padding: 0; box-sizing: border-box; } button { padding: 10px; }.modal { display: flex; justify-content: center; align-items: center; position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.8); }.modal-content { width: 80%; height: 80%; background: #fff; border-radius: 10px; }.modal-images { position: relative; width: 50%; height: 100%; float: left; }.modal-images img { position: absolute; width: 100%; height: inherit; }.image-modal-1 { position: absolute; display: none; }.image-modal-2 { position: absolute; display: none; }.image-modal-3 { position: absolute; display: none; }.image-modal-4 { position: absolute; display: none; }.nav-modal-links { display: flex; justify-content: center; align-items: center; width: 50%; height: 100%; float: right; }.nav-modal-links ul { list-style: none; font-size: 2em; font-family: Verdana, Geneva, Tahoma, sans-serif; }.nav-modal-links ul li { margin-bottom: 40px; cursor: pointer; }.modal:has(.nav-modal-links ul li:first-child:hover).modal-images.image-modal-1 { display: block; } { display: block; }

 <h1>Modal Demo</h1> <button>Click Here.</button> <div class="modal"> <div class="modal-content"> <div class="modal-images"> <img class="image-modal-1" src="images/modal-image.jpg" alt="img1"> <img class="image-modal-2" src="images/image-modal-2.jpg" alt="img2"> <img class="image-modal-3" src="images/image-modal-3.jpg" alt="img3"> <img class="image-modal-4" src="images/image-modal-4.jpg" alt="img4"> </div> <div class="nav-modal-links"> <ul> <li>First Image</li> <li>Second Image</li> <li>Third Image</li> <li>Fourth Image</li> </ul> </div> </div> </div> <script src="script.js"></script>