悬停效果不适用于hr标记

Question

嘿家伙我正在尝试制作一个有六个按钮的页面.我希望图像下方的标题会在鼠标悬停在事件上滑动.我正在使用animate.css.

我的问题是当我使用<hr>标签时,我的悬停效果不起作用.如果我删除了它的工作正常但我想同时使用它们.

我还尝试了css的<div>标签和border-top属性,但是我在标题和图像之间使用的任何元素都将导致停止工作悬停效果.

我试图改变图像的大小并增加填充但它不起作用.有什么想法怎么做吗？

这是我的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;
}

这是一个例子

有人可以帮帮我吗？

提前致谢!!

Answer 1

.caption之后没有直接的.img.

用~而不是+.

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

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