css设置鼠标悬停 鼠标放在div上

css设置鼠标悬停 鼠标放在div上

文章目录

• • 1.示例一
  • 2.示例二
  • 3.css hover只能控制自身，子元素和兄弟元素（下面三个亲测有效）
  • 4.如果需要控制其他元素，需要用到jquery(js)的hover事件

1.示例一

CSS :hover 选择器 – 菜鸟教程

a:hover { background-color:yellow; } 2.示例二

CSS3实现鼠标悬停多种效果

.product1:hover .product1Span{ text-decoration: underline } 3.css hover只能控制自身，子元素和兄弟元素（下面三个亲测有效）

关于hover选择器： 1：改变选择元素本身 　　.xxx:hover{} 2:改变元素的子无素 　　.xxx:hover xxx{} 3:改变元素的相邻元素 　　.xxx:hover +xxx{} 参考博客：理解分析hover控制子元素或父元素或其它元素的样式

4.如果需要控制其他元素，需要用到jquery(js)的hover事件 .productChange { position: absolute; top: -104px; height: 160px; width: 100%; z-index: 1; background-color: white; display: block; transition: all 0.5s ease-in-out; }

• jquery

$(".list.product").hover(function(){ $(".productChange").css("transform","translate(0px, 160px)"); },function(){ $(".productChange").css("transform","translate(0px, 0px)"); }); $(".productChange").hover(function(){ $(".productChange").css("transform","translate(0px, 160px)"); },function(){ $(".productChange").css("transform","translate(0px, 0px)"); });

jQuery hover() 方法