Div悬停功能调整大小css

Question

我创建了一个 div，其中包含一个框，框内是文本和一个 link。我想要的是当一个人将鼠标悬停在带有 link 的此框上时，框底部会出现一条红线。目前我已经做到了 this，但我希望红线是灰色框的宽度，高度只有 5 个像素。

#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;
}

<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>

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悬停功能调整大小css

Div hover function resize css

html

css

resize

hyperlink

mousehover