鼠标悬停之hover选择器

被迫营业的第三天b(￣▽￣)d

学习内容：hover选择题

鼠标放在图片上背景会换，先上示例图

选择鼠标指针浮动在其上的元素，并设置其样式：

定义和用法

:hover 选择器用于选择鼠标指针浮动在上面的元素。

提示：:hover 选择器可用于所有元素，不只是链接。

提示：:link 选择器设置指向未被访问页面的链接的样式，:visited 选择器用于设置指向已被访问的页面的链接，:active 选择器用于活动链接。

注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>五彩导航</title>
</head>
<style>div{height: 58px;width: 120px;float: left;text-align: center;line-height: 50px;margin: 0 auto;}.o{background-image: url(./images/bg1.png);}.o:hover{background: url(./images/bg4.png);}.t{background: url(./images/bg2.png);}.t:hover{background: url(./images/bg5.png);}.th{background: url(./images/bg3.jpg);}.th:hover{background: url(./images/bg6.png);}.f{background: url(./images/bg3.png);}.f:hover{background: url(./images/bg7.png);}
</style>
<body><div class="o">五彩导航</div><div class="t">五彩导航</div><div class="th">五彩导航</div><div class="f">五彩导航</div>
</body>
</html>

示例图

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>家用电器商品分类</title>
</head>
<style>.fo-1{background-color: #0f7cbf;font-size: 18px;height: 35px;width: 300px;font-weight: bold;color: #fff;text-indent: 10px;}   .fo-2{background-color: #e4f1fa;font-size: 14px;font-weight: bold;text-indent: 20px;height: 30px;width: 300px;color: #0f7cbf;}.fo-2:hover{text-decoration:underline;}.fo-3{color: #f666;height: 20px;width: 300px;text-indent: 10px;}.fo-3:hover{text-decoration: underline;color: #f60;}
</style>
<body><div><div class="fo-1">家用电器</div><div class="fo-2">大家电</div><div class="fo-3">平板电视 洗衣机 冰箱</div><div class="fo-3">空调  烟机/灶具  热水器</div><div class="fo-3">冷柜/酒柜  消毒柜  家庭影院</div><div class="fo-2">生活电器</div><div class="fo-3">电风扇  净化器  吸尘器</div><div class="fo-3">净水设备  挂烫机  电话机 </div><div class="fo-2">厨房电器</div><div class="fo-3">榨汁机  电压力锅  电饭煲 </div><div class="fo-3"> 豆浆机  微波炉  电磁炉</div><div class="fo-2">五金家装</div><div class="fo-3">淋浴/水槽  电动工具  手动工具</div><div class="fo-3">仪器仪表  浴霸/排气  灯具</div></div>
</body>
</html>

鼠标悬停之hover选择器相关推荐

jquery鼠标悬停事件hover()
在JQuery中提供了.hover()事件,hover的第一个参数(匿名方法)表示mouseenter,第二个参数表示mouseleave,即表示可以为hover传递两个参数.如下代码所示: $( & ...
如何调试JS中鼠标悬停事件影响的元素？
如何调试JS中鼠标悬停事件影响的元素? 在日常的前端开发中,我们经常要调试许多其他开发者写的网站和代码.此时我们往往会打开浏览器的开发者工具,在 Elements,Console,Network,So ...
html5hover鼠标悬停,不使用hover外部CSS样式实现hover鼠标悬停改变样式
不能使用外部CSS样式实现hover鼠标悬停改变样式在DIV+CSS网页布局中,有时我们不能直接使用外部CSS样式控制DIV样式,比如对a设置a:hover样式. 可以使用onMouseOver(鼠 ...
css hover变成手_html实现鼠标悬停变成手型实现方式
1.采用a标签实现的方式内容 2.采用CSS实现的方式 // 变手形 oElement.style.cursor = "pointer"; // 恢复原样 oElement.st ...
css hover选择器悬停时显示隐藏的内容
css hover选择器悬停时显示隐藏的内容 ul li a name{position: absolute;text-align: center;color:white;visibility: h ...
html鼠标悬停效果_【开发小技巧】023—如何使用HTML和CSS实现3D文字效果
来源 | https://www.geeksforgeeks.org/create-a-3d-text-effect-using-html-and-css/3D文字效果是网页设计领域中最常用的文字效果 ...
CSS实现鼠标悬停缩放
介绍 :hover 选择器选择器示例示例说明 CSS :hover a:hover 选择鼠标在链接上面时 1 转换属性 Property 描述 CSS transform 适用于2D或3D转换的 ...
鼠标悬停显示滚动条，移出不显示
鼠标悬停显示滚动条,移出不显示代码如下: <!DOCTYPE html> <html lang="en"><head><meta cha ...
【Web】CSS实现鼠标悬停实现显示与隐藏特效
鼠标悬停实现显示与隐藏特效简单记录 - 慕课网 Web前端步骤四:鼠标悬停实现显示与隐藏特效初步掌握定位的基本使用,以及CSS选择器更高级的运用,完成一个网页中必会的鼠标经过隐藏显示特效. 实现 ...

鼠标悬停之hover选择器

定义和用法

鼠标悬停之hover选择器相关推荐

最新文章

热门文章