Affect another div when hovering CSS

user_18077196 0
Viewed 67

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 class="slider-container">
        <div class="slider">
            <span style="--i:1;" id="img1"><img src="../img/Imagen1.jpg" alt="proyecto uno"></span>
            <span style="--i:2;" class="img2"><img src="../img/Imagen2.jpg" alt="proyecto dos"></span>
            <span style="--i:3;" class="img3"><img src="../img/Imagen3.jpg" alt="proyecto tres"></span>
            <span style="--i:4;" class="img4"><img src="../img/Imagen4.jpg" alt="proyecto cuatro"></span>
        </div>
        <div class="project-text" id="project1">
            <div class="projectinfo">
                <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 class="project-link">
                    <i class="fas fa-link"></i>
                    <i class="fab fa-github-alt"></i>
                </div>
            </div>    
        </div>
    </div>
</main>
css html
2 Answers

document.getElementById('img1').onmouseover = () => {
    document.getElementById('project1').style.display = 'block';
}
document.getElementById('img1').onmouseout = () => {
    document.getElementById('project1').style.display = 'none';
}
<main>
  <div class="slider-container">
    <div class="slider">
      <span style="--i:1;" id="img1"><img src="../img/Imagen1.jpg" alt="proyecto uno"></span>
      <span style="--i:2;" class="img2"><img src="../img/Imagen2.jpg" alt="proyecto dos"></span>
      <span style="--i:3;" class="img3"><img src="../img/Imagen3.jpg" alt="proyecto tres"></span>
      <span style="--i:4;" class="img4"><img src="../img/Imagen4.jpg" alt="proyecto cuatro"></span>
    </div>
    <div class="project-text" id="project1">
      <div class="projectinfo">
        <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 class="project-link">
          <i class="fas fa-link"></i>
          <i class="fab fa-github-alt"></i>
        </div>
      </div>
    </div>
  </div>
</main>

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

Hope that helps you,
Thank you!

user_155431000

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 class="slider-container">
                <div class="slider">
                    <span style="--i:2;" class="img2"><img src="https://www.fillmurray.com/640/360" alt="proyecto dos"></span>
                    <span style="--i:2;" class="img2"><img src="../img/Imagen2.jpg" alt="proyecto dos"></span>
                    <span style="--i:3;" class="img3"><img src="../img/Imagen3.jpg" alt="proyecto tres"></span>
                    <span style="--i:4;" class="img4"><img src="../img/Imagen4.jpg" alt="proyecto cuatro"></span>
                </div>
                <div class="project-text" id="project1">
                    <div class="projectinfo">
                        <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 class="project-link">
                            <i class="fas fa-link"></i>
                            <i class="fab fa-github-alt"></i>
                        </div>
                    </div>    
                </div>
            </div>

user_111681760
Related