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

CSS中没有鼠标离开的显式属性。现在我明白了你想要的东西。

的jQuery

$('.example1').on('mouseleave', function () {
    var $this = $(this);
    $this.removeClass('mouseenter');
    $this.addClass('mouseleave');
    window.setTimeout(function () {
        $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

Answer 3

将您想要的非悬停状态放在.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 */
}

CSS，鼠标关闭？

3 个答案: