Show two divs alternatively on mouse over and out

Question

I have below given two div elements. I want to show one div at a time. One div on mouseout and one div on mouseover without jquery. Thanks in advance

<div style= 'position: absolute;right: 0px;bottom: 0px;background:#ccc;color:#ffffff;height:15px; width:100px;text-align: center;color:#fff'><a href="http://facebook.com/site=1" target="_blank"> Facebook Ads</a> </div><div style= 'position: absolute;right: 0px;bottom: 0px;background:#ccc;color:#ffffff;height:15px; width:15px;text-align: center;'> Ads </div>

Answer 1

Here is a simple CSS way to do what you want.

toggle the visibility of the divs on hover. This way involves wrapping the two divs inside a parent.

.parent {
  position: absolute;
  right: 50px;
  bottom: 50px;
}

.first {
  background: #ccc;
  color: #ffffff;
  height: 15px;
  width: 100px;
  text-align: center;
  color: #fff
}

.second {
  background: #ccc;
  color: #ffffff;
  height: 15px;
  width: 100px;
  text-align: center;
  display: none;
}

.parent:hover > .first {
  display: none;
}

.parent:hover > .second {
  display: block;
}

 .parent { position: absolute; right: 50px; bottom: 50px; } .first { background: #ccc; color: #ffffff; height: 15px; width: 100px; text-align: center; color: #fff; display: none; } .second { background: #ccc; color: #ffffff; height: 15px; width: 100px; text-align: center; } .parent:hover>.first { display: block; } .parent:hover>.second { display: none; } 

 <div class="parent"> <div class='first'><a href="http://facebook.com/site=1" target="_blank"> Facebook Ads</a> </div> <div class='second'> Ads </div> </div> 

Answer 2

You can achieve this by using javascript

First assign ID to your div.. Say div1 and div 2... Now on mouseout event call a JavaScript function to show div2 and hide div1

function onMouseOut{
         document.getElemwntById("div1"). style.display = "none";

    document.getElemwntById("div2"). style.display = "block";

    }

Similarly on mouseover call a JavaScript function as below to show div1 and hide div2

function onMouseOver{
         document.getElemwntById("div2"). style.display = "none";

    document.getElemwntById("div1"). style.display = "block";

    }

Answer 3

In code below you can see a similar solution with pure CSS with less code and better optimized.

 .container { position: absolute; right: 50px; bottom: 50px; } .fb-ads, .ads { position: absolute; right: 0; top: 0; width: 100px; /* height: 20px; */ /* Active it if you want to add height*/ color: #fff; text-align: center; background: #aaa; } .container:hover .ads {display: none;} 

 <div class="container"> <a class="fb-ads" href="http://facebook.com/site=1" target="_blank">Facebook Ads</a> <div class="ads">Ads</div> </div> 

or look here https://codepen.io/artysimple/pen/LzdGbe?editors=1100