Question

我创建了一个包含框的div，在该框中是文本和链接。我想要的是当一个人用这个链接悬停在这个盒子上时，盒子底部会出现一条红线。目前我管理this，但我希望红线是灰色框的宽度，高度只有5个像素。

＆＃13;

#teamspeak_box {
  width: 159px;
  height: 43px;
  background: #212121;
  bottom: 82px;
  right: 76px;
  position: absolute;
  border-radius: 0px 0px 5px 5px;
}
#teamspeak_box_2 {
  width: 43px;
  height: 43px;
  background: #313131;
  bottom: 82px;
  right: 191px;
  position: absolute;
  border-radius: 0px 0px 0px 5px;
}
#teamspeak_text {
  color: white;
  bottom: 93px;
  right: 66px;
  position: absolute;
}
#teamspeak_image {
  bottom: 80px;
  right: 104px;
  position: absolute;
}
#teamspeak_image a:hover {
  background-color: #C62828;
  transition: all 0.5s ease;
}

＆＃13;

<div id="teamspeak_box"></div>

<div id="teamspeak_box_2">

</div>
<div id="teamspeak_text">
  <p>TEAMSPEAK
    <P/>
</div>


<div id="teamspeak_image">
  <a href="ts3server://craft412.serveminecraft.net:9987">
    <img src="images/CRAFT412 - Box - Teamspeak.png" alt="TEAMSPEAK">
  </a>
</div>

＆＃13;

Answer 1

基本上，您希望在悬停另一个元素时更改一个元素的样式。这可以通过以下方式完成：

#teamspeak_image a:hover ~ #teamspeak_box {
    background-color: #C62828;
    transition: all 0.5s ease;
}

有关详细信息，请参阅this answer。您可以考虑在框中添加border-bottom: 5px solid red;而不是background-color。

Answer 2

为了使红线为灰色框的宽度和5px高，使用css属性设置要阻止的灰色框的显示。因此，对于灰盒使用：

display:block;
height:5px;

之后，您可以为灰色框内的链接设置其他css属性。

Answer 3

我发现你的元素定位疯狂。试试这个

HTML

<a href="ts3server://craft412.serveminecraft.net:9987">
  <div class="teamspeak-box">
    <div class="teamspeak-icon">
      <img src="http://filepic.ru/file/1436899103.png" alt="">
    </div>
    <p>TEAMSPEAK</p>
  </div>
</a>

CSS

.teamspeak-box{
  width: 159px;
  height: 43px;
  background: #212121;
  border-radius: 0px 0px 5px 5px;
  overflow: hidden;
  color: white;
  display: table;
}
.teamspeak-icon{
  width: 43px;
  height: 43px;
  background: #313131;
  display: table-cell;
  transition: all 0.5s ease;
}
.teamspeak-icon img{
  width: 100%;
}
.teamspeak-box p{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.teamspeak-box:hover .teamspeak-icon{
  -webkit-box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1);
  -moz-box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1);
  box-shadow: inset 0px -5px 0px 0px rgba(255,0,0,1);
}

在JSFiddle

上运行此代码

Div hover功能调整css

3 个答案: