Javascript CSS3（jQUery？）隐藏元素；a「；当它悬停时，仅此元素“；b"；可能显示

我有两个要素：

.el-a {}

及

---

默认情况下，

el-b

已经隐藏，而

el-a

正在显示，我需要做的是，一旦用户将

el-a

悬停，

el-a

将隐藏，而

el-b

将出现。是否可以使用CSS3实现这一点，或者只能使用jQuery实现这一点？

通过在每个元素

#el-a

和

#el-b

上使用一个ID，jQuery可以轻松实现这一点：

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

---

它也适用于类，但如果多个项具有类

.el-b

，则当您悬停时，它们都会显示出来。

代码如下所示

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

---

您可以对以

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

---

工作小提琴：

如果el-a和el-b都有一个共同的父项，这里有一种方法：

.el-a{
背景颜色：黄色；
}
.el-b a{
背景颜色：浅蓝色；
不透明度：0；
}
.父母a{
显示：块；
溢出：隐藏；
}
.家长：悬停。el-a{
不透明度：0
}
.家长：悬停。el-b a{
不透明度：1
}

HTML是什么样子的？你能发布你的HTML树吗？如果两个元素都是同一级别的子元素，我会点，但代码太大，我会在JSFIDLE制作一个。不工作，但这是基础：这不工作，当我鼠标悬停时，对象会像机关枪一样闪烁。

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