Affect another div when hovering CSS-CodePudding

I cannot seem to sort out this challenge. I want the div #project1 to show (visibility, opacity, display) when hover on #img1.

can't find the solution. would really appreciate some help.

<main>
    <div >
        <div >
            <span style="--i:1;" id="img1"><img src="../img/Imagen1.jpg" alt="proyecto uno"></span>
            <span style="--i:2;" ><img src="../img/Imagen2.jpg" alt="proyecto dos"></span>
            <span style="--i:3;" ><img src="../img/Imagen3.jpg" alt="proyecto tres"></span>
            <span style="--i:4;" ><img src="../img/Imagen4.jpg" alt="proyecto cuatro"></span>
        </div>
        <div  id="project1">
            <div >
                <span><h4>Project Title</h4></span>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas amet eaque fuga labore facere rem, voluptatem exercitationem ullam molestiae repudiandae obcaecati minus assumenda distinctio numquam similique deserunt temporibus, odit Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident culpa iste nostrum expedita quam et hic iusto assumenda suscipit maxime, ullam nulla dolores eum sunt error, molestias debitis, quia perferendis? </p>
                <div >
                    <i ></i>
                    <i ></i>
                </div>
            </div>    
        </div>
    </div>
</main>

CodePudding user response：

document.getElementById('img1').onmouseover = () => {
    document.getElementById('project1').style.display = 'block';
}
document.getElementById('img1').onmouseout = () => {
    document.getElementById('project1').style.display = 'none';
}

<main>
  <div >
    <div >
      <span style="--i:1;" id="img1"><img src="../img/Imagen1.jpg" alt="proyecto uno"></span>
      <span style="--i:2;" ><img src="../img/Imagen2.jpg" alt="proyecto dos"></span>
      <span style="--i:3;" ><img src="../img/Imagen3.jpg" alt="proyecto tres"></span>
      <span style="--i:4;" ><img src="../img/Imagen4.jpg" alt="proyecto cuatro"></span>
    </div>
    <div  id="project1">
      <div >
        <span><h4>Project Title</h4></span>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas amet eaque fuga labore facere rem, voluptatem exercitationem ullam molestiae repudiandae obcaecati minus assumenda distinctio numquam similique deserunt temporibus, odit Lorem ipsum
          dolor sit amet consectetur adipisicing elit. Provident culpa iste nostrum expedita quam et hic iusto assumenda suscipit maxime, ullam nulla dolores eum sunt error, molestias debitis, quia perferendis? </p>
        <div >
          <i ></i>
          <i ></i>
        </div>
      </div>
    </div>
  </div>
</main>

You can do that using javascript's onmouseover and onmouseout events

Hope that helps you,
Thank you!

CodePudding user response：

It works like this but in your case that's not possible I guess.

.project-text{
  display: block;
}

.slider:hover   .project-text {
  display: block;
  color: red;
}

 
<div >
                <div >
                    <span style="--i:2;" ><img src="https://www.fillmurray.com/640/360" alt="proyecto dos"></span>
                    <span style="--i:2;" ><img src="../img/Imagen2.jpg" alt="proyecto dos"></span>
                    <span style="--i:3;" ><img src="../img/Imagen3.jpg" alt="proyecto tres"></span>
                    <span style="--i:4;" ><img src="../img/Imagen4.jpg" alt="proyecto cuatro"></span>
                </div>
                <div  id="project1">
                    <div >
                        <span><h4>Project Title</h4></span>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas amet eaque fuga labore facere rem, voluptatem exercitationem ullam molestiae repudiandae obcaecati minus assumenda distinctio numquam similique deserunt temporibus, odit Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident culpa iste nostrum expedita quam et hic iusto assumenda suscipit maxime, ullam nulla dolores eum sunt error, molestias debitis, quia perferendis? </p>
                        <div >
                            <i ></i>
                            <i ></i>
                        </div>
                    </div>    
                </div>
            </div>

CodePudding user response：

Perfect! That's what I wanted to know. Thank you all for answering, really appreciate it. Will try with Javascript.