CSS，鼠标关闭？

Question

我正在制作一个展示我的图形作品的网站。对于我工作的其中一个缩略图，我可以做到这一点

.example1:not:hover {
opacity:1;
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transform:rotate(-7deg);
-ms-transform:rotate(-7deg);
-webkit-transform:rotate(-7deg);
transition: transform 0.25s linear;
}

现在，我想要它做

transform:rotate(7deg);
-ms-transform:rotate(7deg);
-webkit-transform:rotate(7deg);

当您将鼠标移到缩略图上时 缩略图的html是

<div id ="maintext">    
<img src="Images/example.png" class="example1" >
</div>

谢谢大家。

Answer 1

首先，你不能像那样使用:not选择器。

如果你想指定一些不悬停的东西，你不需要任何伪类。我想你想要这样的东西：

.example1 {
    /* no rotation */
}
.example1:hover {
    transform:rotate(7deg);
    -ms-transform:rotate(7deg);
    -webkit-transform:rotate(7deg);
}

然后，如果你想要一个不同的状态在它被悬停之后，你需要用 javascript 添加一个类：

$(document).on("mouseleave", ".example1", function() {
    $(this).addClass("hovered");
});

现在你可以有一个这样的 CSS 类：

.example1.hovered {
    transform:rotate(-7deg);
    -ms-transform:rotate(-7deg);
    -webkit-transform:rotate(-7deg);
}

Answer 2

把你想要的非悬停状态放在.example1 { ... }中。然后将悬停状态放入.example1:hover { ... }。因此，如果您想让图像在不悬停时旋转，请这样做：

.example1 {
  opacity:1;
  -webkit-transition: all .15s linear;
  -moz-transition: all .15s linear;
  transform:rotate(-7deg);
  -ms-transform:rotate(-7deg);
  -webkit-transform:rotate(-7deg);
  transition: transform 0.25s linear;
}
.example1:hover {
  /* set all transforms to none or whatever you want when hovering */
}

Answer 3

没有，CSS 中没有明确的鼠标离开属性。现在我明白你想要什么了。

jQuery

$('.example1').on('mouseleave', function () { var $this = $(this); $this.removeClass('mouseenter'); $this.addClass('mouseleave'); window.setTimeout（函数（）{ $this.removeClass('mouseleave'); }, 150); }).on('mouseenter', function () { $(this).addClass('mouseenter'); });

CSS

.example1 {
    -webkit-transition: all .15s linear;
    -moz-transition: all .15s linear;
    transition: transform .15s linear;
    transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
}
.example1.mouseenter {
    transform:rotate(7deg);
    -ms-transform:rotate(7deg);
    -webkit-transform:rotate(7deg);
}
.example1.mouseleave {
    transform:rotate(-7deg);
    -ms-transform:rotate(-7deg);
    -webkit-transform:rotate(-7deg);
}

实时示例： JS Fiddle