实现鼠标经过，离开，点击三种效果

最新推荐文章于 2024-04-11 14:23:12 发布
最新推荐文章于 2024-04-11 14:23:12 发布
阅读量6.6k 收藏
点赞数
分类专栏： JavaScript 文章标签： border table div function redirect stylesheet
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/selfxd/article/details/1784628
版权

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>管理中心－修改登录密码</title>
    <link href="App_Themes/style.css" rel="stylesheet" type="text/css" />

    <script language="javascript" type="text/javascript">       
        function overImg1()
        {
            var img1 = document.getElementById("sqfj");
            var img2 = document.getElementById("gmjf");
            var img3 = document.getElementById("grsz");
            var img4 = document.getElementById("zhgl");
          
            img1.src = "image/sqfj_over.jpg";
            img2.src = "image/gmjf.jpg";
            img3.src = "image/grsz.jpg";
            img4.src = "image/zhgl.jpg";
           
            document.getElementById("sqfjdiv").style.display="block"; 
            document.getElementById("gmjfdiv").style.display="none";   
            document.getElementById("grszdiv").style.display="none";
            document.getElementById("xgmm").style.display="none";
            document.getElementById("txdiv").style.display="none";
            document.getElementById("szmxdiv").style.display="none";
            document.getElementById("ZHTXdiv").style.display="none";
            document.getElementById("ZHMMdiv").style.display="none";
        }
       
        function overImg2()
        {
            var img1 = document.getElementById("sqfj");
            var img2 = document.getElementById("gmjf");
            var img3 = document.getElementById("grsz");
            var img4 = document.getElementById("zhgl");
           
            img1.src = "image/sqfj.jpg";
            img2.src = "image/gmjf_over.jpg";
            img3.src = "image/grsz.jpg";
            img4.src = "image/zhgl.jpg";
           
            document.getElementById("sqfjdiv").style.display="none"; 
            document.getElementById("gmjfdiv").style.display="block";          
            document.getElementById("grszdiv").style.display="none";
            document.getElementById("xgmm").style.display="none";
            document.getElementById("txdiv").style.display="none";
            document.getElementById("szmxdiv").style.display="none";
            document.getElementById("ZHTXdiv").style.display="none";
            document.getElementById("ZHMMdiv").style.display="none";
        }
        function overImg3()
        {
            var img1 = document.getElementById("sqfj");
            var img2 = document.getElementById("gmjf");
            var img3 = document.getElementById("grsz");
            var img4 = document.getElementById("zhgl");
                     
            img1.src = "image/sqfj.jpg";
            img2.src = "image/gmjf.jpg";
            img3.src = "image/grsz_over.jpg";
            img4.src = "image/zhgl.jpg";
           
            document.getElementById("sqfjdiv").style.display="none"; 
            document.getElementById("gmjfdiv").style.display="none";   
            document.getElementById("grszdiv").style.display="block";
            document.getElementById("xgmm").style.display="block";           
            document.getElementById("txdiv").style.display="none";
            document.getElementById("szmxdiv").style.display="none";
            document.getElementById("ZHTXdiv").style.display="none";
            document.getElementById("ZHMMdiv").style.display="none";
           
        }
       
        function overImg4()
        {
            var img1 = document.getElementById("sqfj");
            var img2 = document.getElementById("gmjf");
            var img3 = document.getElementById("grsz");
            var img4 = document.getElementById("zhgl");
           
            img1.src = "image/sqfj.jpg";
            img2.src = "image/gmjf.jpg";
            img3.src = "image/grsz.jpg";
            img4.src = "image/zhgl_over.jpg";
           
            document.getElementById("sqfjdiv").style.display="none"; 
            document.getElementById("gmjfdiv").style.display="none";   
            document.getElementById("grszdiv").style.display="none";
            document.getElementById("xgmm").style.display="none"; 
            document.getElementById("txdiv").style.display="block"; 
            document.getElementById("szmxdiv").style.display="block";
            document.getElementById("ZHTXdiv").style.display="block";
            document.getElementById("ZHMMdiv").style.display="block";     
        }       
       
        function Redirect(url)
        {
           var ifrm = document.getElementById("ifrmBody");
           ifrm.src = url;
        }       
    </script>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body οnmοusedοwn="objdown()">
    <form id="form1" runat="server">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td align="center">
                    <table width="995px" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td colspan="2" align="right" valign="top" style="height: 56px; background-image: url(image/top.jpg)">
                                <!-- 头菜单开始 -->
                                <table width="250" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td valign="top">
                                            <div style="cursor: hand;" οnmοuseοver="imgg1.src='image/index_over.GIF'; divsy.className='style1'"
                                                οnmοuseοut="imgg1.src='image/index.GIF';divsy.className='style2'">
                                                <table>
                                                    <tr>
                                                        <td>
                                                            <img alt="设为首页" id="imgg1" src="image/index.gif" /></td>
                                                        <td>
                                                            <div id="divsy">
                                                                设为首页</div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </td>
                                        <td valign="top">
                                            <div style="cursor: hand;" οnmοuseοver="imgg2.src='image/sc_over.GIF'; divsc.className='style1'"
                                                οnmοuseοut="imgg2.src='image/sc.GIF';divsc.className='style2'">
                                                <table>
                                                    <tr>
                                                        <td>
                                                            <img alt="收藏本站" id="imgg2" src="image/sc.GIF" /></td>
                                                        <td>
                                                            <div id="divsc">
                                                                收藏本站</div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </td>
                                        <td valign="top">
                                            <div style="cursor: hand;" οnmοuseοver="imgg3.src='image/lx_over.GIF'; divlx.className='style1'"
                                                οnmοuseοut="imgg3.src='image/lx.GIF';divlx.className='style2'">
                                                <table>
                                                    <tr>
                                                        <td>
                                                            <img alt="联系我们" id="imgg3" src="image/lx.GIF" /></td>
                                                        <td>
                                                            <div id="divlx">
                                                                联系我们</div>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                                <!-- 头菜单结束 -->
                            </td>
                        </tr>
                        <tr>
                            <td rowspan="2" style="width: 150px; height: 542px; background-image: url(image/left.jpg)">
                                <!-- 子导航栏开始 -->
                                <table id="tbAll" width="150" border="0" cellpadding="0" cellspacing="0" >
                                    <tr>
                                        <td style="width: 10px; height: 30px">
                                        </td>
                                        <td style="width: 25px">
                                        </td>
                                        <td style="width: 106px" rowspan="7" valign="top">
                                            <table width="106" border="0" cellpadding="0" cellspacing="0" id="tb">
                                                <tr>
                                                    <td style="height: 23px">
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="height: 100px">
                                                        <div id="sqfjdiv" style="cursor: hand; display: none" οnmοusedοwn="objdown()">
                                                            <table border="0" cellpadding="0" cellspacing="6">
                                                                <tr>
                                                                    <td align="center">
                                                                        <img alt="申请房间" id="sqfj_two" src="image/sqfj_two.JPG" width="53" height="53" /></td>
                                                                </tr>
                                                                <tr>
                                                                    <td valign="middle">
                                                                        <span id="divsqfj_two">申请房间</span></td>
                                                                </tr>
                                                            </table>
                                                        </div>
                                                        <div id="gmjfdiv" style="cursor: hand; display: none" οnmοusedοwn="objdown()">
                                                            <table border="0" cellpadding="0" cellspacing="6">
                                                                <tr>
                                                                    <td align="center">
                                                                        <img alt="购买积分" id="gmjf_two" src="image/gmjf_two.JPG" width="53" height="53" /></td>
                                                                </tr>
                                                                <tr>
                                                                    <td valign="middle">
                                                                        <span id="divgmjf_two">购买积分</span></td>
                                                                </tr>
                                                            </table>
                                                        </div>
                                                        <div id="grszdiv" style="cursor: hand; display: none" οnmοusedοwn="objdown()" οnclick="Redirect('ModifyPersonInfo.aspx')">
                                                            <table border="0" cellpadding="0" cellspacing="6">
                                                                <tr>
                                                                    <td align="center">
                                                                        <img alt="个人资料设置" id="grzlsz" src="image/grzlsz.jpg" width="53" height="53" /></td>
                                                                </tr>
                                                                <tr>
                                                                    <td valign="middle">
                                                                        <span id="divgrzlsz">个人资料设置</span></td>
                                                                </tr>
                                                            </table>
                                                        </div>
                                                        <div id="txdiv" style="cursor: hand; display: none" οnmοusedοwn="objdown()">
                                                            <table border="0" cellpadding="0" cellspacing="6">
                                                                <tr>
                                                                    <td align="center">
                                                                        <img alt="提现资料设置" id="tjzl" src="image/tjzl.JPG" width="53" height="53" /></td>
                                                                </tr>
                                                                <tr>
                                                                    <td valign="middle">
                                                                        <span id="divtjzl">提现资料设置</span></td>
                                                                </tr>
                                                            </table>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="height: 8px">
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="height: 100px" valign="top">
                                                        <div id="xgmm" style="cursor: hand; display: none" οnmοusedοwn="objdown()">
                                                            <table border="0" cellpadding="0" cellspacing="6">
                                                                <tr valign="top">
                                                                    <td style="width: 73px" align="center">
                                                                        <img alt="修改登陆密码" id="xgdlmm" src="image/xgdlmm.jpg" width="53" height="53" οnclick="Redirect('update_login_pwd.aspx')" /></td>
                                                                </tr>
                                                                <tr>
                                                                    <td valign="middle">
                                                                        <span id="divxgdlmm">修改登陆密码</span></td>
                                                                </tr>
                                                            </table>
                                                        </div>
                                                        <div id="szmxdiv" style="cursor: hand; display: none" οnmοusedοwn="objdown()">
                                                            <table border="0" cellpadding="0" cellspacing="6">
                                                                <tr valign="top">
                                                                    <td style="width: 73px" align="center">
                                                                        <img alt="帐户收支明细" id="szmx" src="image/szmx.JPG" width="53" height="53" /></td>
                                                                </tr>
                                                                <tr>
                                                                    <td valign="middle">
                                                                        <span id="divszmx">帐户收支明细</span></td>
                                                                </tr>
                                                            </table>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="height: 8px">
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="height: 100px" valign="top">
                                                        <div id="ZHTXdiv" style="cursor: hand; display: none" οnmοusedοwn="objdown()">
                                                            <table border="0" cellpadding="0" cellspacing="6">
                                                                <tr valign="top">
                                                                    <td style="width: 73px" align="center">
                                                                        <img alt="帐户提现" id="zhtx" src="image/zhtx.JPG" width="53" height="53" /></td>
                                                                </tr>
                                                                <tr>
                                                                    <td valign="middle">
                                                                        <span id="divzhtx">帐户提现</span></td>
                                                                </tr>
                                                            </table>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="height: 8px">
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="height: 100px" valign="top">
                                                        <div id="ZHMMdiv" style="cursor: hand; display: none" οnmοusedοwn="objdown()">
                                                            <table border="0" cellpadding="0" cellspacing="6">
                                                                <tr valign="top">
                                                                    <td style="width: 73px" align="center">
                                                                        <img alt="设置帐户密码" id="szzhmm" src="image/szzhmm.JPG" width="53" height="53" /></td>
                                                                </tr>
                                                                <tr>
                                                                    <td valign="middle">
                                                                        <span id="divszzhmm">设置帐户密码</span></td>
                                                                </tr>
                                                            </table>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="height: 14px">
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td style="height: 83px">
                                                    </td>
                                                </tr>
                                            </table>
                                            <!-- 子导航栏到些结束 -->
                                        </td>
                                        <td style="width: 10px">
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 10px; height: 14px">
                                        </td>
                                        <td style="width: 25px">
                                        </td>
                                        <td style="width: 10px">
                                        </td>
                                    </tr>
                                    <!-- 主导航栏开始 -->
                                    <tr valign="top">
                                        <td style="height: 90px">
                                        </td>
                                        <td>
                                            <div id="Div1" style="cursor: hand;">
                                                <img alt="申请房间" id="sqfj" src="image/sqfj.jpg" width="24" height="87" οnclick="overImg1()"
                                                    οnmοusedοwn="objdown()" /></div>
                                        </td>
                                        <td>
                                        </td>
                                    </tr>
                                    <tr valign="top">
                                        <td style="height: 90px">
                                        </td>
                                        <td>
                                            <div id="goumai" style="cursor: hand;">
                                                <img alt="购买积分" id="gmjf" src="image/gmjf.jpg" width="24" height="87" οnclick="overImg2()"
                                                    οnmοusedοwn="objdown()" /></div>
                                        </td>
                                        <td>
                                        </td>
                                    </tr>
                                    <tr valign="top">
                                        <td style="height: 90px">
                                        </td>
                                        <td>
                                            <div id="geren" style="cursor: hand;">
                                                <img alt="个人设置" id="grsz" src="image/grsz.jpg" width="24" height="87" οnclick="overImg3()"
                                                    οnmοusedοwn="objdown()" /></div>
                                        </td>
                                        <td>
                                        </td>
                                    </tr>
                                    <tr valign="top">
                                        <td style="height: 90px">
                                        </td>
                                        <td>
                                            <div id="zhanghu" style="cursor: hand;">
                                                <img alt="设置帐户密码" id="zhgl" src="image/zhgl.jpg" width="24" height="87" οnclick="overImg4()"
                                                    οnmοusedοwn="objdown()" /></div>
                                        </td>
                                        <td>
                                        </td>
                                    </tr>
                                    <!-- 主导航栏结束 -->
                                    <tr>
                                        <td style="height: 135px">
                                        </td>
                                        <td>
                                        </td>
                                        <td>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td>
                                <!-- 中间头部从这里开始 -->
                                <table style="width: 845px; height: 76px;" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td style="background-image: url(image/top_2.jpg)">
                                        </td>
                                    </tr>
                                </table>
                                <!-- 中间头部到这里结束 -->
                                <!-- 替换页面从这里开始 -->
                                <iframe src="" scrolling="no" frameborder="0" id="ifrmBody" height="406px" width="845px">
                                </iframe>
                                <!-- 替换页面到这里结束 -->
                            </td>
                        </tr>
                        <tr>
                            <td style="height: 62px; background-image: url(image/below.jpg)">
                                <table cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td align="center" valign="bottom" style="height: 20px">
                                            Copyright &copy; 2003-2007 上海富可信息技术发展有限公司 Email:service@onlineoa.com
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="center" colspan="2">
                                            法律顾问:上海恒业律师事务所&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;沪ICP备 05061318
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </form>

    <script language="javascript" type="text/javascript">
        var img = tb.getElementsByTagName("img");    //得到所有 img 元素卷标名称

          function  objdown()  
          {  
                detachall(); 
          
                for(var i=0;i<img.length;i++)  
                {  
                     img[i].attachEvent("onmouseover",overHandler)   //添加事件
                     img[i].attachEvent("onmouseout",outHandler)  
                }  
                if(event.srcElement)  
                {  
              if(window.event.srcElement.tagName == "IMG")
                 {
                         var id = event.srcElement.id;  
                         event.srcElement.src="image/" +id+"_over.jpg"  
                         event.srcElement.detachEvent("onmouseover",overHandler)  
                         event.srcElement.detachEvent("onmouseout",outHandler)  
               
               var v = document.getElementById("div"+id);
               if(v != null)
               {
                v.className="style1";
               }
                    }
                 else
                 {
                  window.event.returnValue = false;
                 }
          }
         
          }  
           
          function detachall()  
          {  
           for(var i=0;i<img.length;i++)  
                {  
                    var id = img[i].id   //得到 img 的 ID
                    img[i].detachEvent("onmouseover",overHandler)  //去掉 onmouseover 事件, 调用 overHandler 函数
                    img[i].detachEvent("onmouseout",outHandler)   //去掉 onmouseout 事件, 调用 outHandler 函数
                    img[i].src="image/" +id+".jpg";
           
           var v = document.getElementById("div"+id);
           if(v != null)
        {
         v.className="style2";
        }
                }  
          }

          function overHandler()  
          {  
          var id = event.srcElement.id;  
          event.srcElement.src="image/" +id+"_over.jpg"  
          var v = document.getElementById("div"+id);
          if(v != null)
    {
     v.className="style1";
    }
          }  
           
          function outHandler()  
          {  
                var id = event.srcElement.id;  
                event.srcElement.src="image/" +id+".jpg";
          var v = document.getElementById("div"+id);
          if(v != null)
    {
     v.className="style2";
    }
          } 
         
    </script>

</body>
</html>
 

selfxd
关注
专栏目录
鼠标经过图标并显示内容
qq_36070003的博客
05-17 1654
本篇的目的是实现鼠标经过微信图标，显示微信二维码的功能，总结思路和相关知识点。 思路： 使用img标签，并使用一个href为空的a标签作为img标签的父元素。 父元素使用相对定位，img标签为子元素是绝对定位，z轴设置一个较大数，并且使用opacity为0将其隐藏起来。 使用一个icon作为微信图标，也放在a标签里。 当鼠标移动到该图标上时，img标签的opacity变为1，显示这个元素。 动画效果，css3缩放： scale(x,y) 对元素进行缩放 X表示水平方向缩放的倍数 | Y表示垂直方向.
Vue实现鼠标经过文字显示悬浮框效果的示例代码
10-14
在Vue.js中，实现鼠标经过文字时显示悬浮框效果，通常涉及事件监听和DOM操作。以下是一个详细的步骤解释： 1. **需求分析**： 在Vue项目中，我们希望当鼠标移到特定的文字或按钮上时，能在鼠标附近显示一个悬浮框...
鼠标经过效果
iteye_18468的博客
10-17 160
[b]鼠标经过效果[/b] ------ [b]效果概述：[/b] 鼠标经过，显示不同的 背景 的效果， ------ [b]实现：[/b] 可以通过 的 :hover 实现，因为 :hover 被所有主流浏览器支持，因此有较好的兼容性， ------ [b]例子：[/b] [code="html"] /* 鼠标经过效果，用 a 标...
鼠标经过特效
你好！刘斩仙
10-24 774
鼠标经过小特效<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> li{ list-style: none; width: auto;
鼠标经过与鼠标离开
Aa12364567的博客
10-11 332
infoOnMouseOver(index)鼠标经过时调用的方法。mouseenter鼠标经过。mouseleave鼠标离开。鼠标离开时调用的方法。
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
10-16
3. **图片恢复原图机制**：为了实现鼠标离开图片后自动恢复原图，需要在`layer.tips`方法中提供一个回调函数，该函数在鼠标离开图片时被触发，以移除显示的大图。在Layui中可以使用`layer.close(img_show)`来关闭弹...
jQuery实现鼠标经过图片变亮其他变暗效果
10-24
在本例中，我们将探讨如何使用jQuery库来实现这个功能，即“鼠标经过图片变亮其他变暗”的效果。 首先，我们需要理解jQuery的基本用法。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及...
jQuery实现鼠标经过弹出提示信息的地图热点效果
10-23
### jQuery实现鼠标经过弹出提示信息的地图热点效果知识点 #### jQuery基础知识 - **引入jQuery**: 文档中提到了通过`<script>`标签引入jQuery库(`jquery-1.6.2.min.js`)，这是使用jQuery的前提条件。jQuery是一个...
javascript表格隔行变色加鼠标移入移出及点击效果的方法
12-11
本文主要探讨了如何使用JavaScript实现表格隔行变色、鼠标移入移出以及点击效果，以增强表格的可读性和用户的操作体验。 首先，隔行变色是一种常见的视觉分隔技巧，它有助于用户在查看大量数据时避免混淆行与行之间...
选择器分类及鼠标经过效果
你还有我
12-07 498
目录选择器标签选择器ID选择器类选择器通配符后代选择器子代选择器交集选择器并集选择器序选择器相邻选择器兄弟选择器nth-child选择器nth-of-type(n)选择器伪类 选择器 选择器的功能： 选中要添加样式的标签元素。 标签选择器 通过标签名直接选择相应的标签。 不管有多复杂的嵌套关系，标签的位置就算藏得很深，依然可以被标签选择器命中。 格式：标签名{ 声明; } 标签选择器的作用： 1.利用标签选中所有的特性，进行默认样式
经典的鼠标滑过效果
web开发自学
09-07 145
&lt;script&gt; lastScrollX=0; lastScrollY=0; offerX=-5; offerY=10; td_X=0; td_Y=0; td=0; mouseon=0; url=null; taget=null; suspendcode="&lt;DIVid=yuzistyle='right:12px;POSITION:absolute;TOP:12px;'oncl...
关于上一篇鼠标移到按钮时的“按下”效果的三种方法
程序媛之路
07-19 1881
上一篇博文中，关于按钮按下的效果回过头研究了下，总结了如下三种方法，只写出关键样式： 1、相对定位input.button{ position:relative; //用相对定位 } input.button:hover{ top:2px;//鼠标移动到此top增加2px } 2、主要利用外边距这个属性，鼠标移动到按钮位置时，按钮上外边距增加
css3鼠标经过按钮色彩缤纷效果
Vinca@的博客
05-02 288
【代码】css3鼠标经过按钮色彩缤纷效果。
HTML鼠标滑过特效教程
热门推荐
hzp666的博客
02-06 1万+
时下,各种个性化展示网站都会通过鼠标特效增强与用户之间的交互，使得网站更加生动，仿佛懂得跟用户谈话一样。就连展示模式相对古板的信息类网站或者门户网站也抵挡不住诱惑，悄悄地加入了一些按钮互动的效果。 　　本文将给大家介绍一类简约而不简单的鼠标滑过按钮特效，既能让个人网站充分展示个性，也能为效果相对单调的门户类网站增色不少。 　　首先我们来看一下，其中一种特效效果图。 　　本
CSS 制作鼠标经过就变立体的按键
C/C#、Android driver、STM32、Linux等等。
12-29 1266
按键的效果很多，使用CSS控制颜色字体背景变化都是很常见的，因为它作为外观布局利器，控制简便也是显而易见的。这里我们介绍一下如果通过CSS控制将鼠标经过的时候将鼠标经过按键时候能变成立体效果的方法
html中鼠标移走的伪元素,HTML5 教程之CSS 伪元素
weixin_34438539的博客
06-04 391
CSS伪元素CSS伪元素是用来添加一些选择器的特殊效果。语法伪元素的语法：selector:pseudo-element {property:value;}CSS类也可以使用伪元素：selector.class:pseudo-element {property:value;}:first-line 伪元素"first-line" 伪元素用于向文本的首行设置特殊样式。在下面的例子中，浏览器会根据 ...
流程控制项目中，鼠标经过控件，显示四周小方块，鼠标离开控件 ，隐藏四周小方块。用伪元素实现
fred8的博客
03-15 197
流程控制项目中，鼠标经过控件，显示四周小方块，鼠标离开控件 ，隐藏四周小方块。用伪元素实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&gt
审查元素时，hover等伪元素，只会在鼠标悬停在对应元素上时生效。一旦鼠标移开，样式就会消失，已解决
最新发布
花椒和蕊的博客
04-11 688
最近遇到个小小的问题通过控制台查看元素，只有在鼠标悬停在对应元素上时生效。一旦鼠标移开，样式就会消失即使我把右侧的这些都选上了也没用。
JavaScript实现鼠标离开快速切换图片效果
该压缩包包含了实现鼠标离开时快速切换效果的前端资源文件。具体知识点涉及如下几个方面： 1. JavaScript基础知识：JavaScript是Web开发中不可或缺的核心技术之一，用于实现网页的动态交互效果。在这个资源包中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值