Question

我正面临着我的div的行为我无法解决也许你知道一个技巧。我正在尝试做一个小的水平列表，当你悬停一个时会改变背景并向下方显示一个小箭头。我决定使用伪类:: after来显示箭头，将其显示为一个块，将其放在单词下面并具有相对位置，以便它可以很容易地自动居中。问题是，当我这样做时，列表div的高度变化非常难看。我尝试了绝对位置，但它是非常重复且非常低效，是否有一个技巧可以消除这种行为？

.liste--horizontal
{
    list-style: none;
    display: flex;
    justify-content: space-between;
    color: black;
}

.portfolio_selection
{
    background-color: rgb(223, 222, 222);
    padding: 0%;
    margin-top: 4%;
} 

.portfolio_selection_critere
{
    padding: 10px;
}

.portfolio_selection_critere:hover
{
    color: rgba(255, 255, 255, 1);
    background-color: #3491b2;
    box-shadow: 0 3px 0 #277088;

}

.portfolio_selection_critere:hover::after
{
    content: "";
    display: block;
    font-size: 0em;
    width: 0; 
    height: 0;    
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #277088;
    position: relative;
    top: 80%;
    left: 0%;
    right: 0%;
    margin: auto;
}

<ul class="portfolio_selection liste--horizontal">
            <li class="portfolio_selection_critere">All works</li>
            <li class="portfolio_selection_critere">Creative</li>
            <li class="portfolio_selection_critere">Corporate</li>
            <li class="portfolio_selection_critere">Portfolio</li>
</ul>

Answer 1

一个简单的解决方案是让箭头出现在非悬停状态，只需在悬停时调整其颜色和/或不透明度：

＆＃13;

.liste--horizontal {
  list-style: none;
  display: flex;
  justify-content: space-between;
  color: black;
}

.portfolio_selection {
  background-color: rgb(223, 222, 222);
  padding: 0%;
  margin-top: 4%;
}

.portfolio_selection_critere {
  padding: 10px;
}

.portfolio_selection_critere:hover {
  color: rgba(255, 255, 255, 1);
  background-color: #3491b2;
  box-shadow: 0 3px 0 #277088;
}

.portfolio_selection_critere:after {
  content: "";
  display: block;
  font-size: 0em;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #277088;
  position: relative;
  top: 80%;
  margin: auto;
  opacity: 0;
}

.portfolio_selection_critere:hover::after {
  opacity: 1;
}

＆＃13;

<ul class="portfolio_selection liste--horizontal">
  <li class="portfolio_selection_critere">All works</li>
  <li class="portfolio_selection_critere">Creative</li>
  <li class="portfolio_selection_critere">Corporate</li>
  <li class="portfolio_selection_critere">Portfolio</li>
</ul>

＆＃13;

如果你不想让身高增长，那就让它成为绝对位置并调整上/左的值：

＆＃13;

.liste--horizontal {
  list-style: none;
  display: flex;
  justify-content: space-between;
  color: black;
}

.portfolio_selection {
  background-color: rgb(223, 222, 222);
  padding: 0;
  margin-top: 4%;
}

.portfolio_selection_critere {
  padding: 10px;
  position:relative;
}

.portfolio_selection_critere:hover {
  color: rgba(255, 255, 255, 1);
  background-color: #3491b2;
  box-shadow: 0 3px 0 #277088;
}

.portfolio_selection_critere:after {
  content: "";
  position:absolute;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #277088;
  top:100%;
  left:calc(50% - 10px);
  opacity: 0;
}

.portfolio_selection_critere:hover::after {
  opacity: 1;
}

＆＃13;

<ul class="portfolio_selection liste--horizontal">
  <li class="portfolio_selection_critere">All works</li>
  <li class="portfolio_selection_critere">Creative</li>
  <li class="portfolio_selection_critere">Corporate</li>
  <li class="portfolio_selection_critere">Portfolio</li>
</ul>

＆＃13;

高度随着:: after和相对位置而变化

1 个答案: