Question

我有两个要素：

.el-a {}

和

.el-b {}

默认情况下，el-b已隐藏，而el-a正在显示，我需要做的是用户悬停el-a后，el-a将隐藏el-b会出现。是否可以使用CSS3实现，或者只能通过jQuery实现？

Answer 1

如果el-a和el-b都有一个共同的父母，那么这是一种方式：

＆＃13;

.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
}

＆＃13;

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

＆＃13;

你没有说明你是否想要el-a正在崩溃的区域，所以我没有让它崩溃，但也可以这样做。此外，如果el-a和el-b具有相同的维度，或者el-b出现在el-a之前，则会更容易。

Answer 2

通过在每个元素#el-a和#el-b上使用ID，您可以使用jQuery轻松完成此操作：

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

它也适用于类，但如果多个项目具有类.el-b，则它们将在您悬停时显示。

Answer 3

代码看起来像这样

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

Answer 4

您可以将此方法用于以'el'开头的类的多个项目，因为它不涉及硬编码。

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

工作小提琴：http://jsfiddle.net/huy6yvdu/

CSS3（jquery？）隐藏元素＆＃34; a＆＃34;当它徘徊时，就是这样的元素＆＃34; b＆＃34;可能会显示

4 个答案: