Question

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

我的问题是当我使用＆lt; hr＆gt;标签我的悬停效果不起作用。如果我删除了它的工作正常，但我想同时使用它们。

我也试过＆lt; div＆gt; css的tag和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;
}

以下是example

有人可以帮帮我吗？

先谢谢!!

Answer 1

.caption之后没有.img。

使用~代替+。

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

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

悬停效果不适用于hr标记

1 个答案: