CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Matheus Lopes
Matheus Lopes

Reputation: 325

CSS3 (jQUery?) Hide element "a" when it is hovered, just so element "b" might display

I have two elements:

.el-a {}

and

.el-b {}

By default, el-b is already hidden, while el-a is displaying, what I need to do is once the user hovers the el-a, the el-a will hide and the el-b will appear. Is it possible to achieve that using CSS3, or it can only be achieved with jQuery?

Upvotes: 1

Views: 58

Answers (4)

Richard Hamilton
Richard Hamilton

Reputation: 26444

The code would look like this

$(document).ready(function() {
    $(".el-b").hide();
    $(".el-a").on("mouseover", function() {
       $(".el-b").show();
       $(this).hide();
    }).on("mouseout", function() {
        $(".el-b").hide();
        $(this).show();
    });
});

Upvotes: 0

Robert McKee
Robert McKee

Reputation: 21477

Here is one way, if both el-a and el-b have a common parent:

.el-a a {
  background-color: yellow;
}
.el-b a {
  background-color: lightblue;
  opacity: 0;
}
.parent a {
  display: block;
  overflow: hidden;
}
.parent:hover .el-a a {
  opacity: 0
}
.parent:hover .el-b a {
  opacity: 1
}
<div class="parent">
  <div class="el-a">
    <a href="#">1</a>
  </div>


  <div class="el-b">
    <a href="#">2</a> 
  </div>
</div>

You didn't specify if you wanted the area that el-a was taking to collapse or not, so I didn't make it collapse, but that can be done as well. Also, it would be easier if either el-a and el-b were the same dimensions, or el-b occurs before el-a.

Upvotes: 1

DinoMyte
DinoMyte

Reputation: 8868

You may use this approach for multiple items with classes starting with 'el' as it involves no hardcoding. 

$('[class*=el]').hover(   // delegate hover event to all elements having css classes starting with 'el'
         function() {   // this function executes when hovered on
            $('[class*=el]').each(function(){ // iterate through each elements having css classes starting with 'el'
              $(this).toggle();  // this basically sets show -> hide , and hide -> show.
            });        
        }, function() { // this function executes when hovered off
             $('[class*=el]').each(function(){
              $(this).toggle();
            });    
        });

Working fiddle : http://jsfiddle.net/huy6yvdu/

Upvotes: 0

Sam
Sam

Reputation: 1125

You can easily do this with jQuery by using an ID on each element #el-a and #el-b:

$('#el-a').mouseenter(function(){
  $(this).hide();
  $('#el-b').show();
});

It would also work with classes but if multiple items have the class .el-b, they will all show when you hover.

Upvotes: 0

Related Questions