Question

我正在尝试隐藏多个<div>元素，并且当有人将鼠标悬停在<li>项上时，分别要显示<div>。因此，我使用了boostrap容器，然后在其中放入一行，然后将该行分为<div class="col-2">和<div class="col-10>，其中所有<li>项都位于<div class="col-2">中，并且隐藏了{{ 1}}为<div>。这是我的代码

<dic class="col-10">

 #divli01,#divli02,#divli03,#divli04,#divli05{
            display: none;
        }
        #li01:hover +#divli01{
            color: red;
            display: block;
        }
        #li02:hover +#divli02{
            color: red;
            display: block;
        }
        #li03:hover +#divli03{
            color: red;
            display: block;
        }
        #li04:hover +#divli04{
            color: red;
            display: block;
        }
        #li05:hover +#divli05{
            color: red;
            display: block;
        }

最初，我用CSS <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-2"> <ul> <li id="li01">A</li> <li id="li02">B</li> <li id="li03">C</li> <li id="li04">D</li> <li id="li05">E</li> </ul> </div> <div class="col-10"> <div id="divli01"> <p> A section goes here</p> <p> A section goes here</p> <p> A section goes here</p> <p> A section goes here</p> </div> <div id="divli02"> <p> B section goes here</p> <p> B section goes here</p> <p> B section goes here</p> <p> B section goes here</p> </div> <div id="divli03"> <p> C section goes here</p> <p> C section goes here</p> <p> C section goes here</p> <p> C section goes here</p> </div> <div id="divli04"> <p> D section goes here</p> <p> D section goes here</p> <p> D section goes here</p> <p> D section goes here</p> </div> <div id="divli05"> <p> E section goes here</p> <p> E section goes here</p> <p> E section goes here</p> <p> E section goes here</p> </div> </div> </div> </div>隐藏了所有<div>，然后当用户将鼠标悬停在display:none项目上时，Iam试图显示每个div。但是我想我错过了一些东西。所以任何人都可以帮忙。

Answer 1

我在ul元素中添加了一个类，以轻松选择li元素，您也可以选择其他任何方法。

let li = document.querySelectorAll('.unhover li');

function displayDiv(event) {
  // console.log(event.target.id);
  document.getElementById('div' + event.target.id).style.display = 'block';
  document.getElementById('div' + event.target.id).style.color = 'red';
}

function hideDiv(event) {
  // console.log(event.target.id);
  document.getElementById('div' + event.target.id).style.display = 'none';

}

li.forEach(item => {
  item.addEventListener('mouseenter', displayDiv);
  item.addEventListener('mouseleave', hideDiv);
});

#divli01,
#divli02,
#divli03,
#divli04,
#divli05 {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-2">
      <ul class="unhover">
        <li id="li01">A</li>
        <li id="li02">B</li>
        <li id="li03">C</li>
        <li id="li04">D</li>
        <li id="li05">E</li>

      </ul>

    </div>
    <div class="col-10" id="divs">

      <div id="divli01">
        <p> A section goes here</p>
        <p> A section goes here</p>
        <p> A section goes here</p>
        <p> A section goes here</p>
      </div>

      <div id="divli02">
        <p> B section goes here</p>
        <p> B section goes here</p>
        <p> B section goes here</p>
        <p> B section goes here</p>
      </div>

      <div id="divli03">
        <p> C section goes here</p>
        <p> C section goes here</p>
        <p> C section goes here</p>
        <p> C section goes here</p>
      </div>

      <div id="divli04">
        <p> D section goes here</p>
        <p> D section goes here</p>
        <p> D section goes here</p>
        <p> D section goes here</p>
      </div>
      <div id="divli05">
        <p> E section goes here</p>
        <p> E section goes here</p>
        <p> E section goes here</p>
        <p> E section goes here</p>
      </div>

    </div>
  </div>
</div>

Answer 2

如果您不想使用Javascript，则需要更改html结构以能够将CSS用于该任务。您可以通过将col-10和<li> div嵌套在li:hover .col-10 {display: block}元素中来实现。然后使用CSS可以设置：

<li>

如果您不想更改html结构，则可以使用Javascript向Task timed out after 10.01 seconds元素（“ mouseenter”和“ mouseleave”）中添加事件侦听器，以便可以在其中添加/删除类鼠标输入/离开时对应的div

Answer 3

您也可以使用jQuery。

这是codepen的链接。您想要类似的东西...

[https://codepen.io/multanisadik/pen/jjvrqq]

请复查。如果对您有帮助。

多个DIV的CSS悬停效果不起作用

3 个答案: