Html Question posted in
Some basic documentation can be found here.

Html – Have Hover as default, then close it when hovering over other element

I want to have the first element opened by default, so the layout is full width. But the element needs to close when hovering over one of the other elements and i cant get it to do that. I tried to work with removeClass() but im not fit with JS.
I can also only use pure JS.

[Edit] I made the effect i want with pure css. But its not as smooth as i wanted and i had to get rid of the transisition effect or else it bugs out between hovering. Is there a smoother way to achieve what i did here?
Here is the jsfiddle: https://jsfiddle.net/w4Lbf9h3/

/* Allgemeine Styles */
  .header-font{font-size:32px!important;}
  
  /*Collaborate Styles*/
.collab-item
{
  position:relative;
    overflow:hidden;
    display: inline-block;
    width: 25%;
    height: 419px;
    /*  transition: all 0.4s ease; */
    background-color: green;
    margin-right: 10px;
  vertical-align: top;
}

.collab-item:hover
{
 
   width: 40%;
    height: 482px;
    margin-right: 1%;
}
  .collab-item:hover .info-hover{
    display:inline-block;
  }
  
.collab-container{
  color:black!important;
  }
  
  
  .homepage-content{text-align:left; 
    padding:10px;
  }
  .homepage-title{font-size:28px; 
    font-weight:bold; 
  }
  .homepage-title p{line-height:110%!important;color:black!important;}
  .info-hover{
    position:absolute;
    bottom:0; 
    width:100%; 
    padding:15px; 
    display:none;  }
  .info-hover p{color:black!important;}
  .participate{background-color:red;}
    .explore{background-color:green}
  .submit{background-color:green;}

.active-collab{
  position:relative;
    overflow:hidden;
    display: inline-block;
    background-color: green;
    margin-right: 10px;
  vertical-align: top;
  width: 40%;
    height: 482px;
    margin-right: 1%;}

  .active-collab-text{position:absolute;
    bottom:0; 
    width:100%; 
    padding:15px; 
    }
  .active-collab-text p{color:black!important;}
  
.submit{display:none;}

.participate:hover ~ .active-collab{display:none;}
.participate:hover ~ .submit{display:inline-block;}
.explore:hover ~ .active-collab{display:none;}
.explore:hover ~ .submit{display:inline-block;}
<div class="collab-container">
  <div class="collab-item participate">
    <div class="homepage-content">
      <div class="homepage-title">
        <p>Participate in<br />
        </p>
      </div>
      
      <div class="info-hover">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
      </div>
    </div>
  </div>
  <div class="collab-item explore">
    <div class="homepage-content">
      <div class="homepage-title">
        <p>Explore<br />
        Co-Creation and<br />
        Talent Programs</p>
      </div>
      <div class="info-hover">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
      </div>
    </div>
  </div>
  
  <div class="collab-item active-collab">
    <div class="homepage-content">
      <div class="homepage-title">
        <p>Become part of a<br />
        global network</p>
      </div>
      <div class="active-collab-text">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
        </div>    </div>
  
  </div>
  
  
  <div class="collab-item submit">
    <div class="homepage-content">
      <div class="homepage-title">
        <p>Become part of a<br />
        global network</p>
      </div>
      
      <div class="info-hover">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
      </div>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    I think you need to do that with JS. Otherwise it might be possible with pseudoelements (e.g. ::before).

    Hope that helps a little bit 🙂

    Login or Signup to reply.
  2. 0

    Add mouseover and mouseout events to add/remove ‘active’ class to the default box.

    // Get the element
const button = document.querySelector('.not-active');

// Add a mouseover event listener
button.addEventListener('mouseover', () => {
  document.querySelector('.collab-item.participate').classList.remove("active");
});

// Add a mouseout event listener
button.addEventListener('mouseout', () => {
  document.querySelector('.collab-item.participate').classList.add("active");
});
    /* Allgemeine Styles */
  .header-font{font-size:32px!important;}
  
  /*Collaborate Styles*/
.collab-item
{
  position:relative;
    overflow:hidden;
    display: inline-block;
    width: 25%;
    height: 419px;
    background-color: green;
    margin-right: 10px;
    transition: all 0.4s ease;
  vertical-align: top;
}

.collab-item:hover
{
 
   width: 32%;
    height: 482px;
    margin-right: 1%;
}
  .collab-item:hover .info-hover{
    display:inline-block;
  }
  
.collab-container{
  color:black!important;
  }
  
  
  .homepage-content{text-align:left; 
    padding:10px;
  }
  .homepage-title{font-size:28px; 
    font-weight:bold; 
  }
  .homepage-title p{line-height:110%!important;color:black!important;}
  .info-hover{
    position:absolute;
    bottom:0; 
    width:100%; 
    padding:15px; 
    display:none;  }
  .info-hover p{color:black!important;}
  .participate{background-color:red;}
    .explore{background-color:green}
  .submit{background-color:green;}

.active{width: 32%;
    height: 482px;
    margin-right: 1%;}
    <div class="collab-container">
  <div class="collab-item participate active">
    <div class="homepage-content">
      <div class="homepage-title">
        <p>Participate in<br />
        </p>
      </div>
      
      <div class="info-hover">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
      </div>
    </div>
  </div>
  <div class="collab-item explore not-active">
    <div class="homepage-content">
      <div class="homepage-title">
        <p>Explore<br />
        Co-Creation and<br />
        Talent Programs</p>
      </div>
      <div class="info-hover">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
      </div>
    </div>
  </div>
  <div class="collab-item submit">
    <div class="homepage-content">
      <div class="homepage-title">
        <p>Become part of a<br />
        global network</p>
      </div>
      
      <div class="info-hover">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</p>
      </div>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search