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

Question

我试图隐藏多个 <div> 元素，当有人将鼠标悬停在 <li> 项目上时，相应的 <div> 将被显示。所以我使用了一个 boostrap 容器，然后在其中有一排，然后将行 divided 放入 <div class="col-2"> 和 <div class="col-10>，其中所有 <li> 项目都在 <div class="col-2"> 并隐藏 <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;
        }

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

最初我用 css display:none 隐藏了所有 <div> 然后当用户悬停在 <li> 项目上时我试图显示每个 div .但我想我错过了一些东西。所以任何人都可以帮助解决这个问题。

Answer 1

如果您不想使用 Javascript，则需要更改 html 结构以便能够使用 CSS 完成该任务。您可以通过将 col-2 & col-10 div 嵌套在 <li> 元素中来实现。然后使用 css 你可以设置：

li:hover .col-10 {display: block}

如果您不想更改 html 结构，那么您将使用 Javascript 将事件侦听器添加到 <li> 元素（'mouseenter' & 'mouseleave') 这样就可以add/remove一个class到鼠标上对应的diventer/leave

Answer 2

我已经很容易地将class到ul元素添加到select 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 3

您也可以使用 jQuery。

这里是codepen的link。这是你想要的类似的东西...

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

请审核。如果对你有帮助的话。

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

CSS hover effect for multiple DIV s not working

html

css

hover

hide

twitter-bootstrap