在鼠标悬停的图像上显示按钮 [英] Display button over an image on mousehover
本文介绍了在鼠标悬停的图像上显示按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好，
我需要在鼠标悬停在图像上时在图像上显示一个按钮，并在鼠标悬停期间模糊图像。目前按钮正在显示，但是在图像上方并且图像没有模糊。我需要在图像上显示它并在按钮浸入时模糊图像。
任何帮助都会非常感激。谢谢提前。
我尝试过：
Hi all,
I need to display a button over an image during mousehover over the image and blur the image during mousehover. Currently the button is displaying ,but above the image and the image is not blurred.I need to display it over the image and blur the image when button is diplaying.
Any help will really appreciated.Thanks in Advance.
What I have tried:
<tr>
<td align="left">
<asp:Image ID="Image2" CssClass="img" Width="150px" ImageUrl='<%# Bind("IN0050102", "../pro/Certificates/{0}") %>' runat="server" />
<cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server" PopupControlID="popupImage" TargetControlID="Image2"
HoverDelay="100"></cc1:HoverMenuExtender>
<asp:Panel runat="server" ID="popupImage" BorderColor="#628BD7">
<asp:Button ID="btn_changepic" runat="server" Text="Change/upload Photo" Width="200px" CssClass="btn5"/>
</asp:Panel>
</td>
<td> </td>
<td align="left">
<asp:Label Font-Size="X-Large" ID="lb_empname" align="center" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "IN00502")%>'></asp:Label>
<asp:Label Font-Size="Large" ID="Label1" align="center" runat="server" Text='<%# Eval("IN00504", "(Emp Code:{0})") %>'></asp:Label><br />
<asp:Label Font-Size="Large" ID="Label2" align="center" runat="server" Text='<%# Eval("IN005_03", "{0}") %>'></asp:Label>
</td>
</tr>
推荐答案
试试此代码
try this code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>anythings</title>
<pre><pre lang="CSS">
<style>
.div1 {
float: left;
width: 30%;
overflow: hidden;
margin-left: 1.33333%;
margin-bottom: 12px;
border-radius: 10px;
position: relative;
}
.div1 .itembox{
overflow: hidden;
}
.div1 .itembox .item img{
width: 100%;
height: 100%;
}
.div1 .itembox .item .over {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(247,96,14,.8);
color: #fff;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.dis{
display:none;
}
</style>
<button id="btn" class="dis"> Hello </button>
<script >
var btn=document.getElementById('btn');
var ov=document.getElementById('blur');
function fundisplay() {
ov.classList.remove("over");
btn.classList.remove("dis");
}
function funblur() {
ov.classList.add("over");
btn.classList.add("dis");
}
</script>
</body>
</html>
这篇关于在鼠标悬停的图像上显示按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
