我正在努力实现以下目标
这是我的html:btn_ol
类具有<a>
和<span>
(对象为svg)
<div class="btn_ol">
<a href="http://google.com/" target="_blank"></a>
<span>Google<object class=ol_svg data="../assets/images/common/icon_ol.svg" type="image/svg+xml"></object></span>
</div>
这是我的CSS:
.btn_ol {
padding: 2.3rem 1.8rem;
border: 2px solid #0c5a9d;
cursor: pointer;
width: 604px;
display: block;
margin: 35px auto;
outline: none;
vertical-align: middle;
text-align: center;
position: relative;
overflow: hidden;
background-color: transparent;
color: #0c5a9d;
transition: background-color 300ms ease-out;
z-index: 1;
}
.btn_ol:hover {
background: #0c5a9d;
border-color: #0c5a9d;
color: #fff;
}
.btn_ol a{
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.btn_ol span {
display: inline-block;
position: relative;
font-size: 1.8rem;
margin: 0 auto;
transition: all 300ms ease-out;
will-change: transform;
font-weight: bold;
}
.btn_ol:hover span {
transform: translate3d(-1rem, 0, 0);
}
.btn_ol .ol_svg {
position: absolute;
margin: auto 5px;
top: 25%;
width: 1.1em;
right: -0.5rem;
opacity: 0;
transition: all 300ms ease-out;
will-change: right;
}
.btn_ol .ol_svg * {
stroke-width: 5;
}
.btn_ol:hover .ol_svg {
opacity: 1;
right: -3.5rem;
}
@media screen and (max-width: 720px) {
.btn_ol {
width: 100%;
padding: 2.3rem 1.1rem;
margin: 20px auto;
}
.btn_ol span {
line-height: 1.8rem;
font-size: 1.4rem;
}
.btn_ol .ol_svg {
top: 15%;
right: 0rem;
}
.btn_ol:hover .ol_svg {
right: -2.5rem;
}
}
在此CSS中,我们正在努力实现以下目标-悬停时文本和svg文件移动-悬停时颜色反转。-打开链接
PC没有问题,但我发现SP站点操作有问题。
[在平板电脑上操作时,单击两次即可跳出链接。第一次单击将鼠标悬停,第二次单击将打开窗口。
显然,我能够确认要删除
.btn_ol:hover .ol_svg {
opacity: 1;
}
将在第一次点击时打开链接,但是我不确定如何在保持SVG视图的同时实现它。
请帮助我:)
通常将图像用作链接。不要忘记将它们包含在标签中。
<div class="btn_ol">
<a href="http://google.com/" target="_blank">
<span>Google<object class=ol_svg data="../assets/images/common/icon_ol.svg" type="image/svg+xml"></object></span>
</a>
</div>