Question

当我将鼠标悬停在#btn-home按钮上时，我想定位#btn-home a { display: inline-block; color: #707070; font-size: 1.15em; font-weight: 600; margin: 0 20px; } #btn-home { position: relative; display: inline-block; margin: 0; } #btn-home a:after { display: block; position: absolute; content: ''; margin: 0 auto; height: 3px; width: 25px; background-color: red; bottom: -7px; left: 0; right: 0; }元素。

<div id="btn-home">
  <a href="<?php echo get_home_url(); ?>">HOME</a>
</div>

:after

我希望在#btn-home上方悬停.nav-menu li:last-child a:after { content: none; }元素的宽度。

Answer 1

这很容易做到。只需将选择器用作#btn-home:hover a:after。

＆＃13;

#btn-home a {
  display: inline-block;
  color: #707070;
  font-size: 1.15em;
  font-weight: 600;
  margin: 0 20px;
}
#btn-home {
  position: relative;
  display: inline-block;
  margin: 0;
}
#btn-home a:after {
  display: block;
  position: absolute;
  content: '';
  margin: 0 auto;
  height: 3px;
  width: 25px;
  background-color: red;
  bottom: -7px;
  left: 0;
  right: 0;
  transition: all 1s ease; /* just for demo */
}
#btn-home:hover a:after{
  width: 100px;

＆＃13;

<div id="btn-home">
  <a href="<?php echo get_home_url(); ?>">HOME</a>
</div>

＆＃13;

Answer 2

您需要在代码中添加：

#btn-home a:after {
transition:all .4s linear;
}
#btn-home:hover a:after {
width: 50px;
}

＆＃13;

#btn-home a {
  display: inline-block; 
  color: #707070;
  font-size: 1.15em;
  font-weight: 600;
  margin: 0 20px;
}

#btn-home {
  position: relative;
  display: inline-block;
  margin: 0;
}

#btn-home a:after {
  display: block;
  position: absolute;
  content: '';
  margin: 0 auto;
  height: 3px; width: 25px;
  background-color: red;
  bottom: -7px; left: 0; right: 0;
  transition:all .4s linear;
}

#btn-home:hover a:after {
width: 50px;
}

＆＃13;

<div id="btn-home">
    <a href="<?php echo get_home_url(); ?>">HOME</a> 
</div>

＆＃13;

定位：在悬停元素之后

2 个答案: