Making an image appear when hovering on a list element-CodePudding

"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 >
  <div >
    <div >
      <img  src="images/modal-image.jpg" alt="img1">
      <img  src="images/image-modal-2.jpg" alt="img2">
      <img  src="images/image-modal-3.jpg" alt="img3">
      <img  src="images/image-modal-4.jpg" alt="img4">
    </div>
    <div >
      <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"

CodePudding user response：

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 >
  <div >
    <div >
      <img  src="images/modal-image.jpg" alt="img1">
      <img  src="images/image-modal-2.jpg" alt="img2">
      <img  src="images/image-modal-3.jpg" alt="img3">
      <img  src="images/image-modal-4.jpg" alt="img4">
    </div>
    <div >
      <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>