箭头 hover 在后面添加一个圆形 div

Question

我有两个箭头图像（上一个/下一个），这里的代码如下：

.fp-controlArrow {
    position: absolute;
    width: 32px; /* This can be added here so you don't have to set a width and height 2 times for each arrow, this will create one width for both arrows */
    height: 32px; /* This does the same as above */
    margin-top:-15px; /* This value must always be half of the height - This does the same as above */
    z-index: 30;
    top: 50%;
    cursor: pointer;
}

.fp-controlArrow.fp-prev {
    left:0;
    background: url(https://uploads-ssl.webflow.com/602dbecd2160ce28b5bc428b/602e923133f8dc0bf994fc49_left-arrow.svg) no-repeat;
}
.fp-controlArrow.fp-next {
    right:0;
    background: url(https://uploads-ssl.webflow.com/602dbecd2160ce28b5bc428b/602e9231ec03b6c9682b540c_right-arrow.svg) no-repeat;

我想当我 hover 在箭头上时，它会在箭头后面出现一个圆形透明圆圈，如下例所示：

在此处输入图像描述

我怎样才能做到这一点？

谢谢你！

Answer 1

padding: 1em;
border-radius: 50%;
background-color: rgba(200,200,200,0.5)

将这些行添加到.fp-controlArrow class 应该可以。

编辑

抱歉，我没有意识到它是 svg。 您必须内联 svg。

<div class="fp-controlArrow fp-prev">

  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-reactroot="">
    <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1" stroke="#221b38" d="M16 20L8 12L16 4"></path>
  </svg>

</div>
<div class="fp-controlArrow fp-next">

  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-reactroot="">
    <path stroke-linejoin="round" stroke-linecap="round" stroke-width="1" stroke="#221b38" d="M8 20L16 12L8 4"></path>
  </svg>

</div>

.fp-controlArrow {
    position: absolute;
    width: 32px; /* This can be added here so you don't have to set a width and height 2 times for each arrow, this will create one width for both arrows */
    height: 32px; /* This does the same as above */
    margin-top:-15px; /* This value must always be half of the height - This does the same as above */
    z-index: 30;
    top: 50%;
    cursor: pointer;
    padding: 1em;
    border-radius: 50%;

}

.fp-controlArrow:hover {
  background: green;
  background-color: rgba(200,200,200,0.5);
} 

.fp-controlArrow.fp-prev {
    left:0;
}
.fp-controlArrow.fp-next {
    right:0;
  

这是一个演示它的代码笔。

Answer 2

抱歉，我没有看到：和 hover 之间的空格。

.fp-controlArrow.fp-prev {
left:0;
background: url(https://uploads-ssl.webflow.com/602dbecd2160ce28b5bc428b/602e923133f8dc0bf994fc49_left-arrow.svg) no-repeat;
border-radius: 50px;
}
.fp-controlArrow.fp-prev:hover{
background-color: #999999;
}