CSS - 当另一个悬停时显示div

Question

我试图在另一个悬停时显示一个div（.mydiv3），但我要显示div ...

.mydiv1, .mydiv2, .mydiv3 {
  display:none;
}

.trigger {
  text-align:center;
  padding:10px;
  color:teal;
}

.trigger:hover{
  background:red;
}

<div class="trigger">
  Hover Trigger
</div>

<div class="mydiv1">
    Text Content 1
</div>

<div class="mydiv2">
    Text Content 2
</div>

<div class="mydiv3">
    Text Content 3
</div>

有没有办法用CSS做这个或jQuery我最好的选择？

Answer 1

您可以在CSS中使用~来获得所需的结果。检查代码段。

＆＃13;

＆＃13;

.mydiv1, .mydiv2, .mydiv3 {
  display:none;
}

.trigger {
  text-align:center;
  padding:10px;
  color:teal;
}

.trigger:hover{
  background:red;
}

.trigger:hover~.mydiv3{
display: block;
}

＆＃13;

<div class="trigger">
  Hover Trigger
</div>

<div class="mydiv1">
    Text Content 1
</div>

<div class="mydiv2">
    Text Content 2
</div>

<div class="mydiv3">
    Text Content 3
</div>

＆＃13;

＆＃13;

＆＃13;

编辑：使用jQuery，如果元素不是兄弟姐妹

$(.trigger).on('mouseenter', function(){
   $('.mydiv3').show();
};

$(.trigger).on('mouseleave', function(){
   $('.mydiv3').hide();
};

希望这有帮助

Answer 2

您可以使用常规兄弟选择器。

＆＃13;

＆＃13;

.mydiv1,
.mydiv2,
.mydiv3 {
  display: none;
}

.trigger {
  text-align: center;
  padding: 10px;
  color: teal;
}

.trigger:hover {
  background: red;
}

.trigger:hover~.mydiv3 {
  display: block;
}

＆＃13;

<div class="trigger">
  Hover Trigger
</div>

<div class="mydiv1">
  Text Content 1
</div>

<div class="mydiv2">
  Text Content 2
</div>

<div class="mydiv3">
  Text Content 3
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用JQuery：

$(".trigger").mouseout(function() {
    $(".mydiv3").hide();
})
.mouseover(function() {
    $(".mydiv3").show();
});