CODEWITHSUNDEEP
htmlcss
Michael Armesto
Michael Armesto

Reputation: 25

Affect another div when hovering CSS

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>

Upvotes: 2

Views: 96

Answers (2)

Ayush
Ayush

Reputation: 700

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.

Upvotes: 2

Saikat Roy
Saikat Roy

Reputation: 523

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>

Upvotes: 0

Related Questions