Question

我在CSS中创建了一个向下箭头但我希望它被视为一个正方形。目前，要触发任何悬停效果，您需要将鼠标悬停在其中一条线上。我想在两行之间徘徊以达到同样的效果，但我无法想到任何有用的东西。

不幸的是，我在解释问题时非常可怕，因此难以进行搜索，所以希望我能在这里得到帮助。我的CSS下面有一个片段。

＆＃13;

.down:before {
  transform: rotate(55deg) translateX(-20px);
}
.down:after {
  transform: rotate(-55deg) translateX(20px);
}
.down:before,
.down:after {
  content: '';
  background-color: #000;
  display: block;
  height: 2px;
  width: 40px;
  transition: all 500ms ease-in-out;
}
.down:hover:before,
.down:hover:after {
  background-color: #808080;
}

/* FOR VISIBILITY IN SNIPPET */
.down {
  position: absolute;
  top: 50px;
  left: 50px;
}

＆＃13;

<a href="#" class="down"></a>

＆＃13;

Answer 1

免责声明：这些值可能需要根据使用情况进行调整。

这可以通过为元素设置padding来完成。

padding-top: 50px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

或合并padding: top right bottom left

padding: 50px 10px 10px 10px;

请参阅下面的演示：

＆＃13;

.down:before {
  transform: rotate(55deg) translateX(-20px);
}
.down:after {
  transform: rotate(-55deg) translateX(20px);
}
.down:before,
.down:after {
  content: '';
  background-color: #000;
  display: block;
  height: 2px;
  width: 40px;
  transition: all 500ms ease-in-out;
}
.down:hover:before,
.down:hover:after {
  background-color: #808080;
}

/* FOR VISIBILITY IN SNIPPET */
.down {
  position: absolute;
  top: 50px;
  left: 50px;
  padding-top: 50px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}

＆＃13;

<a href="#" class="down"></a>

＆＃13;

CSS Hover将元素视为方形

1 个答案: