为什么 (className:hover + className) 在我的页面上不起作用？

Question

我卡在我的 html 页面上，当鼠标悬停在不同的元素上时要显示另一个 class 元素。当 serc-item 悬停时，我使用 (+) 显示我的 pop-item。

这是我的代码

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

我已经在 google 上搜索过它，它显示的内容与我的代码类似，但我不知道为什么我的代码不起作用，在此先感谢有人可以告诉我我的错误是什么。

Answer 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;
}

并添加新行 For Top alignment of 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
}

Answer 2

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

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

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

为什么 (className:hover + className) 在我的页面上不起作用？

Why (className:hover + className) is not working on my page?

html

css

hover