在鼠标悬停的图像上显示按钮

问题描述：

大家好，

我需要在鼠标悬停在图像上时在图像上显示一个按钮，并在鼠标悬停期间模糊图像。目前按钮正在显示，但是在图像上方并且图像没有模糊。我需要在图像上显示它并在按钮浸入时模糊图像。

任何帮助都会非常感激。谢谢提前。

我尝试过：

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>

在鼠标悬停的图像上显示按钮

相关推荐