抽屉head部分，hover应用，鼠标放上变色

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .pg_head{
 8             background-color: #2459a2;
 9             position: fixed;
10             top: 0;
11             right: 0;
12             left: 0;
13             height: 48px;
14             line-height:48px;
15         }
16         .pg_body{
17             margin-top: 50px;
18         }
19         .w{
20            width: 980px;
21             margin: 0 auto;
22         }
23
24         .menu{
25             display: inline-block;
26             padding: 0 10px 0 10px;
27             color: white;
28         }
29          /*当鼠标移动到标签上时以下属性才会应用*/
30         .menu:hover{
31             background-color: #5e81ca;
32         }
33     </style>
34 </head>
35 <body>
36
37 <div class="pg_head">
38     <div class="w">
39         <a class="logo">logo</a>
40         <a class="menu">全部</a>
41         <a class="menu">42区</a>
42         <a class="menu">笑话</a>
43         <a class="menu">图片</a>
44     </div>
45 </div>
46 <div class="pg_body">
47     <div class="w">f</div>
48
49 </div>
50
51
52 </body>
53 </html>

效果如下图

原文地址：https://www.cnblogs.com/topzhao/p/9166455.html

时间： 2024-10-10 13:16:45

抽屉head部分，hover应用，鼠标放上变色的相关文章

JavaScript基础鼠标放上触发事件onmouseover 鼠标移开触发事件onmouseout

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

css特效，鼠标放上显示标题说明

鼠标放上去,出现屏蔽层.标题.说明,第一个有3D上下滑动效果,第二个有渐变效果两个css实现的效果图如下: 1. CSS样式特效 1 <style type="text/css"> 2 3 *{ 4 margin:0; 5 padding:0 6 } 7 8 body{font:400 14px/150% 'Microsoft YaHei',Tahoma, Helvetica, Arial, sans-serif; color:#424242; background:#f

JavaScript基础通过id查找节点通过节点的style属性添加鼠标放上出现小手的效果 getElementById style

3、selenium 实现鼠标移动到元素上，并操作元素（鼠标放上后才出现的元素）点击

1.获取鼠标将移动到的元素 List<WebElement> list1 = driver.findElement(By.id("AAA")).findElements(By.className("BBB")); WebElement we = list1.get(0);2.鼠标移动 action.moveToElement(we).perform();3.等待3s Thread.sleep(4000);4.JavascriptExecutor 定义 J

td里的内容宽度自适应及鼠标放上显示标题div title

td里的内容自适应宽度, 用 width:100%控制 strRight+="<td bordercolor='#DEDEDE' width='500px' height='50px'><div title='"+data[i].description+"'><textarea rows='2' "+disWord+" class='txt' id='description' style='font-size:12px; co

easyui 单元格超出鼠标放上弹出全部

其他方式:https://www.cnblogs.com/raitorei/p/9878192.html onLoadSuccess : function(data) { //单元格超出部分隐藏并鼠标移动到单元格时弹框显示 $(".datagrid-row td div").each(function() { $(this).attr("title", $(this).text()); }); } 原文地址:https://www.cnblogs.com/raito

js 鼠标放上选中

<!DOCTYPE html> <html> <head> <title></title> </head> <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script> <body> <

jq div鼠标放上、离开马上展开、收缩方法

<body> <div id="aa" style="width:500px; height:30px; border:1px solid #000"></div> <div id="bb" style="width:500px; height:300px; border:1px solid #000; display:none"></div> </body&g

用CSS做长度超过长度显示‘...’，当鼠标放上时显示全部内容

<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title>文本相关属性设置</tit