主页 / 问题 / 1075149
Accepted
MegaRoks
Asked:2020-01-28 03:50:12 +0000 UTC2020-01-28 03:50:12 +0000 UTC

悬停伪类可以显示不是孩子的div吗

  • 772

:hover我有两个父容器，当悬停在类中的三个元素中的任何一个上时cl1，我想了解伪类是否可以工作cl3。

例如，将鼠标悬停在<div class="cl2">Hover1</div>并应显示<div class="cl4">I'm hidden2</div>.

这就是我所做的，当然它不起作用。

.cl4 {
  display: none;
}

.cl1 ~ .cl2:hover ~ .cl3 ~ .cl4 {
  display: block;
}
<body>
  <div class="container">
    <div class="cl1">
      <div class="cl2">Hover1</div>
      <div class="cl2">Hover2</div>
      <div class="cl2">Hover3</div>
    </div>

    <div class="cl3">
      <div class="cl4">I'm hidden1</div>
      <div class="cl4">I'm hidden2</div>
      <div class="cl4">I'm hidden3</div>
    </div>
  </div>
</body>

html

2 个回答

  1. Best Answer

    在这种情况下，css这是无法做到的。

    或者，使用:target伪类

    .cl4 {
  display: none;
}

.cl4:target {
  display: block;
}
    <div class="cl1">
  <a class="cl2" href="#id1">Hover1</a>
  <a class="cl2" href="#id2">Hover2</a>
  <a class="cl2" href="#id3">Hover3</a>
</div>

<div class="cl3">
  <div class="cl4" id="id1">I'm hidden1</div>
  <div class="cl4" id="id2">I'm hidden2</div>
  <div class="cl4" id="id3">I'm hidden3</div>
</div>

    • 2

  2. 回答

    不，当将鼠标悬停在嵌套元素 (cl2) 上时，您将无法访问外部元素。CSS 影响从上到下传播，不能倒退（不能通过子元素引用父元素）。

    如果需要向上导航 DOM 树，则需要 JS。（在示例中显示了一个带有 Jquery 和最近的变体 -> 查找）

    该符号~允许您引用相邻元素。

    在您的特定示例中，您可以将鼠标悬停在父元素 cl1 上并使用它来访问相邻元素。

    您可以一次在 :hover 上挂多个规则并同时显示 cl3 及其嵌套元素。（如示例所示）。

    查看示例：

    $('.cl10').hover(
  function() {
    $( this ).closest('.container').find('.cl11').show();
    $( this ).closest('.container').find('.cl12').show();
  }, function() {
    $( this ).closest('.container').find('.cl11').hide();
    $( this ).closest('.container').find('.cl12').hide();
  }
);
    .container{
display:flex;
flex-wrap:wrap;
}
.container > div{
flex:0 0 100%;
}
.cl3 {
  display: none;
}

.cl1:hover~.cl3 {
  display: block;
}

.cl8,
.cl7 {
  display: none;
}

.cl5:hover~.cl7 .cl8 {
  display: block;
}

.cl5:hover~.cl7 {
  display: block;
}


.cl11,
.cl12 {
  display: none;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
    <h3>Обращение через CSS к соседнему элементу</h3>
  <div class="container">
    <div class="cl1">
      <div class="cl2">отлавливаем hover на cl1</div>
      <div class="cl2">отлавливаем hover на cl1</div>
      <div class="cl2">отлавливаем hover на cl1</div>
    </div>

    <div class="cl3">
      <div class="cl4">Показываем cl3 через ~</div>
      <div class="cl4">Показываем cl3 через ~</div>
      <div class="cl4">Показываем cl3 через ~</div>
    </div>
  </div>
  <h3>Обращение через CSS к соседнему элементу и вложенным в него элементам</h3>
  <div class="container">
    <div class="cl5">
      <div class="cl6">отлавливаем hover на cl5</div>
      <div class="cl6">отлавливаем hover на cl5</div>
      <div class="cl6">отлавливаем hover на cl5</div>
    </div>

    <div class="cl7">
      <div class="cl8">Показываем cl7 и cl8 через ~ и несколько правил</div>
      <div class="cl8">Показываем cl7 и cl8 через ~ и несколько правил</div>
      <div class="cl8">Показываем cl7 и cl8 через ~ и несколько правил</div>
    </div>
  </div>
  <h3>Обращение через jQuery к родительскому элементу и вложенным в него элементам</h3>
  <div class="container">
    <div class="cl9">
      <div class="cl10">отлавливаем hover на cl9</div>
      <div class="cl10">отлавливаем hover на cl9</div>
      <div class="cl10">отлавливаем hover на cl9</div>
    </div>

    <div class="cl11">
      <div class="cl12">Показываем через jQuery cl11 и вложенный в него cl12<div>
      <div class="cl12">Показываем через jQuery cl11 и вложенный в него cl12<div>
      <div class="cl12">Показываем через jQuery cl11 и вложенный в него cl12<div>
    </div>
  </div>
</body>

    • 1

相关问题