我只想在 hover 并且它工作时才在图像上放置一个链接，但是当我在链接上使用 hover 时它开始滞后
[英]i want to put a link on the image only while hover and it worked , but when i hover over the link it start lagging
问题描述
I want to make link(.fm) appearing while hovering the image, but my code isn't working (when i hover to the link it starts to appear and dissapear fast).this is the code.
我想让链接（.fm）在悬停图像时出现，但我的代码不起作用（当我将 hover 指向链接时，它开始出现并快速消失）。这就是代码。 I tried usind z-index but it didn't worked, also tried changing positions, but without succes.我试过 usind z-index 但它没有用，也尝试过改变位置，但没有成功。 Any tips please.can you please help me by typing a working code or correcting mine?请提供任何提示。您可以通过输入工作代码或更正我的代码来帮助我吗？
.fm a{
position:absolute;
display: none;
background-color: #5D5D5D;
color:pink;
padding:10px;
}
.caine1 img:hover + .fm a{
display:block;
z-index: 1;
}
<div class="caine1">
<img src="1.png" width="400" height="250"></img>
<div class="fm">
<a href="#" id="f1">Female</a>
</div>
</div>
The code is working, but it have lags while hovering the.fm link代码正在运行，但在悬停.fm 链接时会出现延迟
2 个解决方案
解决方案1
0 2021-11-27 00:46:06
Your using display block, there is no transition animation on this component.您使用的显示块，此组件上没有过渡 animation。 Display block is binary, meaning there no way to animate this.显示块是二进制的，这意味着无法对其进行动画处理。 Instead, use this:相反，使用这个：
.fm a{ position:absolute; width: 0; height: 0; visibility: hidden; opacity: 0; background-color: #5D5D5D; color:pink; padding:10px; transition: all 1s ease-out }.caine1 img:hover +.fm a{ display:block; z-index: 1; width: 4rem; height: 1.5rem; font-size: 1rem; visibility: visible; opacity: 1; }
<div class="caine1"> <img src="1.png" width="400" height="250"></img> <div class="fm"> <a href="#" id="f1">Female</a> </div> </div>
解决方案2
0 2021-11-27 21:19:31
This is another example but using javascript.这是另一个示例，但使用的是 javascript。 This will help with your problem that link disappears so fast.这将有助于解决链接消失得如此之快的问题。
<.DOCTYPE html> <html lang="en"> <head> <style>:wrapper { width; 400px: height; auto. }:fm { position; absolute: padding; 10px: background-color; #5D5D5D: } a,link: a,visited: a:active { text-decoration; none: color; pink. }.caine1:fm { display; block: height; 250px: width; 400px. }:link { font-family; Verdana: font-size; 16px: color; crimson: z-index; 1: display; block: width; 400px. }:hiddenLink { display; none. } </style> </head> <body> <div class="wrapper"> <div id="myImage" class="caine1"> <img id="img" src="1.png" width="400" height="250"></img> <div id="link" class="hiddenLink"><a href="#" class="fm">This is my hidden link</a></div> </div> </div> <script> document.getElementById("myImage"),addEventListener("mouseover". function() { document.getElementById("link");className = "link"; }). document.getElementById("img"),addEventListener("mouseleave". function() { document.getElementById("link");className = "hiddenLink"; }); </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.