-3

I'm in the middle of making a site that will showcase my graphic work. For one of the thumbnails of my work i've got it to do this

.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;
}

now, i want it to do 

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

when you take your mouse of the thumbnail The html of the thumbnail is

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

thanks all.

4

3 回答 3

2

首先，你不能: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);
}
于 2013-05-24T16:08:18.670 回答
2

不，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

于 2013-05-24T16:10:01.817 回答
1

把你想要的非悬停状态放在 just 中.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 */
}
于 2013-05-24T16:08:29.457 回答