[英]arrow hover adding a circle div behind
I have two arrow images (previous / next) with the code here like this:我有两个箭头图像(上一个/下一个),这里的代码如下:
.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;
I would like when I hover over an arrow it a round transparent circle appeared behind the arrow like on this example:我想当我 hover 在箭头上时,它会在箭头后面出现一个圆形透明圆圈,如下例所示:
enter image description here在此处输入图像描述
how can I achieve this?我怎样才能做到这一点?
thank you!谢谢你!
padding: 1em;
border-radius: 50%;
background-color: rgba(200,200,200,0.5)
Add those lines to the .fp-controlArrow
class That should do it.将这些行添加到
.fp-controlArrow
class 应该可以。
Sorry, I didn't realize it was svg.抱歉,我没有意识到它是 svg。 You will have to inline the 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;
Sorry, I didn't saw the space between: and hover.抱歉,我没有看到:和 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.