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

Question

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?

Can you post your HTML tree? if both elements are *same-level* children, [it's possible with CSS3](http://stackoverflow.com/a/4502693/2151050) — Adam Azad, Dec 03 '15 at 23:34
Not working, but that's the basis: https://jsfiddle.net/wb1gwfe1/11/ — Matheus Lopes, Dec 03 '15 at 23:50

score 1 · Answer 1 · answered Dec 04 '15 at 00:24

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.

score 0 · Answer 2 · answered Dec 03 '15 at 23:44

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.

Richard Hamilton · Answer 3 · 2015-12-04T02:56:35.167

0

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();
    });
});

edited Dec 04 '15 at 02:56

answered Dec 03 '15 at 23:45

Richard Hamilton

25,478
10
60
87

This is not working, when I mouse over, the object keeps blinking, like a machine gun. – Matheus Lopes Dec 04 '15 at 01:01

score 0 · Answer 4 · answered Dec 04 '15 at 00:08

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/

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

4 Answers4