I'm trying hide div 1 when hovering it, then show div 2 when div 1 is hidden-CodePudding

I'm in need of hiding a div on mouse hover and then show another div instead, I'm trying to achieve this by using css but when I test the code, both divs are hidden. Maybe this can only be achieved using jQuery?

I wrote down this code in pure CSS/HTML:

.responsive-banner {
  width: 100%;
  height: 154px;
  overflow: hidden;
  margin: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.responsive-banner a {
  text-decoration: none;
  color: #fff;
}

.banner-description {
  /*width:70%;
      height:127px; */
  display: flex;
  align-items: center;
}

.banner-description-2 {
  padding: 7px;
  max-height: 127px;
  overflow: hidde
}

.banner-title {
  font-family: "Roboto", "Arial", sans-serif;
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 5px;
  text-shadow: #000 1px 1px 1px;
  color: #000;
}

.banner-txt {
  font-family: "Roboto", "Arial", sans-serif;
  font-size: 1.11rem;
  color: #000;
}

.banner-btn {
  background: #279fba;
  float: right;
  margin-left: 20px;
  padding: 12px;
  font-size: 18px;
  border-radius: 4px
}

a.banner-btn {
  color: #FF0000;
  padding: 3px 5px;
}

a.banner-btn:hover {
  color: #5ca5ff;
}

#banneryoutube1 {
  bottom: 0;
  left: 0;
  float: left;
  background-image: url(/image1.webp);
  background-repeat: no-repeat;
  display: inline-block;
  cursor: pointer;
  width: 246px;
  height: 138px;
  background-size: 246px 138px;
  background-color: transparent;
}

#banneryoutube12 {
  bottom: 0;
  left: 0;
  float: left;
  background-image: url(/image2.webp);
  background-repeat: no-repeat;
  display: inline-block;
  cursor: pointer;
  width: 246px;
  height: 138px;
  background-size: 246px 138px;
  background-color: transparent;
  /* animation: wahooMario 0.12s linear 1;*/
}

#showbannerinarticle1 {
  display: block
}

#showbannerinarticle2 {
  display: none
}

#showbannerinarticle1:hover {
  display: none
}

#showbannerinarticle2:hover {
  display: block
}

<div id="showbannerinarticle1" >
  <a href="/index.html" rel="nofollow" target="_blank">
    <div id="banneryoutube1" /></div>
<div >
  <div >
    <div >
      1</div>
    <div >LOREM IPSUM
    </div>
  </div>
</div>
</a>
</div>
<div id="showbannerinarticle2" >
  <a href="/index2.html" rel="nofollow" target="_blank">
    <div id="banneryoutube12" /></div>
<div >
  <div >
    <div >
      1</div>
    <div >LOREM IPSUM
    </div>
  </div>
</div>
</a>
</div>

How can I proceed with this? Basically when I'm creating is an animated banner.

CodePudding user response：

The issue may be that CSS cannot consider something to be hovered unless it is visible, and so it gets confused.

I would wrap both in another div and target the CSS to the wrapper, like this:

.wrapper:hover .hide-me {
  display: none;
}

.wrapper:hover .show-me {
  display: block;
}

<div >
  <div >Content 1</div>
  <div >Content 2</div>
</div>

CodePudding user response：

I would use:

document.getElementById('firstDivId').style.display = "none";
document.getElementById('secondDivId').style.display = "block";
// Switch these around when doing the opposite

CodePudding user response：

Heres some workign example you can play with using jquery.

$(document).ready(function(){
  $(".div1").hover(function(){
   $(".div2").show();
     $(".div1").hide();

});

  $(".div2").hover(function(){
   $(".div1").show();
     $(".div2").hide();

});
});

.div1 {
  background-color: blue;
  cursor: pointer;
  color: white;}

.div2 {
  background-color: yellow;
  display:none;
  cursor: pointer;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div  >
<h1>This is my div 1</h1>
</div>

<div >
<h1>div 2 is now showing</h1>
</div>