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() 方法