悬停效果不适用于 hr 标签

Question

大家好，我正在尝试制作一个包含六个按钮的页面。我希望图像下方的标题会在鼠标悬停在 event.I 上时滑入，为此我正在使用 animate.css。

我的问题是当我使用

标签时我的悬停效果不起作用。如果我删除它它工作正常但我想一起使用。

我也尝试了

标签和 css 的 border-top 属性但是我使用的任何元素 in-between 标题和图像都会导致停止工作悬停效果。

我尝试更改图像的大小并增加填充，但它不起作用。有什么办法吗？

这是我的 html 代码：

<div class="btn-row">
    <a href="domainSearch.html">
        <div class="box-btn">
            <img src="style/img/university.jpg" class="img"><hr class="caption-border">
            <div class="caption animated slideInUp">&nbsp;&nbsp;&nbsp;Institution</div>
            </div>
     </a>
</div>

这是我的 css:

.caption{
display: none;
text-align: center;
font-size: 1.5em;
color: $txt-lightgrey;
position: absolute;
margin: -10px 0px 0px -75px;
}

.img:hover + .caption{
  display: inline;
}

这里是example

有人可以帮我吗？

提前致谢！！

Answer 1

.img后面没有.caption。

使用 ~ 代替 +。

.img:hover ~ .caption {
    display: inline;
}

https://jsfiddle.net/hwunxuy5/1/

悬停效果不适用于 hr 标签

hover effect is not working with hr tag

html

css

animate.css