为什么 (className:hover + className) 在我的页面上不起作用？ [复制]答案

【问题标题】：Why (className:hover + className) is not working on my page? [duplicate]为什么 (className:hover + className) 在我的页面上不起作用？ [复制]
【发布时间】：2021-02-25 15:30:31
【问题描述】：

当悬停不同的元素时，我被困在我的 html 页面中以显示其他类元素。当服务项悬停时，我使用 (+) 显示我的弹出项。

这是我的代码

.serv-item{
  margin: 10px 60px 0 0; 
  display: inline;
}
.serv-item a{
  color: #fff;
  display: inline-block;
  text-align: center;
  background-image: url("../img/serv1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 15%;
  height: 250px;
}
.serv-item a h3{
  font-family: 'Dosis', sans-serif !important;
  font-size: 20px;
  padding-top: 100px;
}

.serv-item:hover + .pop-info{/*Here i use + to display my h4 when serv-item is hover*/
  opacity: .7;
  display: inline-block;
}
.pop-info{
  display:none;
  position: relative;
  font-family: 'Dosis', sans-serif !important;
  font-size: 11px;
  margin-top: 25px;
  padding: 8px;
  border: 2px solid #fff;
  font-weight: bold;
  letter-spacing: .1em;
}

        <div class="serv-list">
          <div class="serv-item">
            <a href="#">
                <h3>ITEM 1</h3>
                <h4 class="pop-info">VIEW OFFER</h4><!--This is I want to display when serv-item is hover, because I set this to display none-->> 
            </a>
          </div>
          <div class="serv-item">
            <a href="#">
                <h3>ITEM 3</h3>
                <h4 class="pop-info">VIEW OFFER</h4>
            </a>
          </div>
        </div>

我已经在谷歌上搜索过它，它显示的代码与我的代码相似，但我不知道为什么我的代码不起作用，提前感谢有人可以教我我的错误是什么。

【问题讨论】：

只需删除+。通过使用+，您试图选择紧接在之后 .serv-item 放置的第一个.pop-info。
@HarunYilmaz 现在如何控制单个悬停线中的多个类名？有可能吗？

标签： html css hover

【解决方案1】：

您好，在 css 中无需使用 + 参数

你可以用这个css这里我用a >

.serv-item:hover a > .pop-info{
  opacity: .7;
  display: inline-block;
}

你也可以使用这样的代码

.serv-item:hover .pop-info{
  opacity: .7;
  display: inline-block;
}

并为块的顶部对齐添加这一新行

.serv-item a{
  color: #fff;
  display: inline-block;
  text-align: center;
  background-image: url("../img/serv1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 15%;
  height: 250px;
  vertical-align:top; //ADD THIS NEW LINE
}

【讨论】：

【解决方案2】：

css中的“+”组合符只适用于相邻的兄弟元素。

所以正确的代码应该是这样的：

.serv-item:hover .pop-info{
  display:block;
}

【讨论】：