多个 DIV 的 CSS 悬停效果不起作用 [重复]

Posted 2023-05-08

【中文标题】多个 DIV 的 CSS 悬停效果不起作用 [重复]

【英文标题】：CSS hover effect for multiple DIV s not working [duplicate]

【发布时间】：2020-01-16 08:42:30

【问题描述】：

我试图隐藏多个 <div> 元素，当有人将鼠标悬停在 <li> 项目上时，相应的 <div> 将被显示。所以我使用了一个 boostrap 容器，然后在其中有一行，然后将行分成<div class="col-2"> 和<div class="col-10>，其中所有<li> 项目都在<div class="col-2"> 和隐藏<div>s 是<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。但我想我错过了一些东西。所以有人可以帮忙吗？

【问题讨论】：

从您的 html 结构来看，我认为没有 javascript 就不可能做到这一点，因为您无法正确选择 div 元素。 + 是相邻兄弟选择器，在这里不起作用。

@njras 如果可能，请您提交示例代码

【参考方案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>

【参考方案2】：

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

li:hover .col-10 display: block

如果您不想更改 html 结构，那么您将使用 Javascript 将事件侦听器添加到 <li> 元素（'mouseenter' & 'mouseleave'），以便您可以添加/删除一个类到相应的鼠标进入/离开时的div

【参考方案3】：

您也可以使用 jQuery 来做到这一点。

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

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

请查看。如果对你有帮助的话。