悬停效果不符合hr标签

嘿家伙我试图做一个有六个按钮的页面。我希望图像下的标题可以在鼠标上滑过event.I为此使用animate.css。悬停效果不符合hr标签

我的问题是当我使用<小时>标记我的悬停效果不起作用。如果我删除了它的工作正常，但我想一起使用。

我也试过<div> css的标签和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

任何人可以帮助我吗？

在此先感谢！

来源

2015-05-15 Dipesh Raichana

.img之后没有.caption。

使用~而不是+。

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

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

来源

2015-05-15 06:44:41 panther

可我知道..什么用的〜和+ ..你能解释一下吗？谢谢 – pcs

@saina：'+'是下一个兄弟，在这种情况下，'.img'，'~'普通同胞（在这个例子中，我们跳过'hr'并激发'.caption'元素）。 – panther

你能给我提供任何链接详细介绍，谢谢.. – pcs

悬停效果不符合hr标签

回答

相关问题