CSS3 Transition：一段时间后悬停效果反转动画

时间：2022-01-10 08:07:09

I have a CSS transition that enlarges images on hover, however I would like the hover effect to simply deactivate after a certain amount of time. The reason is that the hover effect activates on mobile devices through clicking, but it never deactivates even if you click somewhere else on the screen, unless you click on another image or link which then activates that hover event. Here is my CSS:

我有一个CSS转换,在悬停时放大图像,但我希望悬停效果在一定时间后停用。原因是悬停效果通过点击在移动设备上激活,但即使您单击屏幕上的其他位置也不会停用,除非您单击另一个图像或链接然后激活该悬停事件。这是我的CSS:

.effectfront {
  border: none;
  margin: 0 auto;
}
.effectfront:hover {
  -webkit-transform: scale(12);
  -moz-transform: scale(12);
  -o-transform: scale(12);
  transform: scale(12);
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  padding: 2px;
  background: rgba(0,0,0,0.5);
  border:1px solid rgba(0,0,0,1);
}
 <body><img class="effectfront" style="width:50px" src="https://sharetribe.s3.amazonaws.com/images/listing_images/images/100255/big/b4b8ry-cuaav_os.jpg?1427485186"style=height:80%> </body>

Is there a workaround using just CSS? Or would Javascript be required?

有没有使用CSS的解决方法?或者是否需要Javascript?

2 个解决方案

#1

Set the transition in your .effectfront-class

在.effectfront-class中设置转换

.effectfront {
  border: none;
  margin: 0 auto;
 -webkit-transition: all 0.5s ease; /* Safari and Chrome */
  	 -moz-transition: all 0.5s ease; /* Firefox */
  	 -o-transition: all 0.5s ease; /* IE 9 */
  	 -ms-transition: all 0.5s ease; /* Opera */
  	 transition: all 0.5s ease;
}
.effectfront:hover {
  -webkit-transform: scale(12);
  -moz-transform: scale(12);
  -o-transform: scale(12);
  transform: scale(12);
  padding: 2px;
  background: rgba(0,0,0,0.5);
  border:1px solid rgba(0,0,0,1);
}
 <body><img class="effectfront" style="width:50px" src="https://sharetribe.s3.amazonaws.com/images/listing_images/images/100255/big/b4b8ry-cuaav_os.jpg?1427485186"style=height:80%> </body>

#2

You could use @keyframes (http://jsfiddle.net/sergdenisov/ksfuhors/3/):

你可以使用@keyframes(http://jsfiddle.net/sergdenisov/ksfuhors/3/):

.effectfront {
    border: none;
    margin: 0 auto;
}

.effectfront:hover {
    padding: 2px;
    -webkit-animation: myscale 2s 1;
    animation: myscale 2s 1;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 0, 0, 1);
}

@-webkit-keyframes myscale {
    0%   { -webkit-transform: scale(1); }
    25%  { -webkit-transform: scale(12); }
    90%  { -webkit-transform: scale(12); }
    100% { -webkit-transform: scale(1); }
}

@keyframes myscale {
    0%   { transform: scale(1); }
    25%  { transform: scale(12); }
    90%  { transform: scale(12); }
    100% { transform: scale(1); }
}

But I think it's strange behavior.

但我认为这是奇怪的行为。

Updated.

To understand the problem with iOS browsers, read this article — http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html.

要了解iOS浏览器的问题,请阅读本文 - http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html。

If you need to close scaled image when user clicks/taps on any other element on the page, I suggest 2 simple solutions:

如果您需要在用户点击/点击页面上的任何其他元素时关闭缩放图像,我建议2个简单的解决方案:

1. Add cursor: pointer for iOS browsers (http://output.jsbin.com/pagori):

1.添加光标:iOS浏览器的指针(http://output.jsbin.com/pagori):

HTML:

<body>
    <div class="body-wrapper">
        ...
    </div>
</body>

CSS:

html, body, .body-wrapper {
    height: 100%;
}

    .body-wrapper_ios {
        cursor: pointer;
    }

JS:

var userAgent = navigator.userAgent.toLowerCase();

if ((/(ipad|ipod|iphone)/i).test(userAgent)) {
    document.getElementsByClassName('body-wrapper')[0]
            .className += ' body-wrapper_ios';
}

2. Add empty click event handler to body-wrapper element (http://output.jsbin.com/bizizi):

2.将空单击事件处理程序添加到body-wrapper元素(http://output.jsbin.com/bizizi):

HTML:

<body>
    <div class="body-wrapper">
        ...
    </div>
</body>

CSS:

html, body, .body-wrapper {
    height: 100%;
}

JS:

document.getElementsByClassName('body-wrapper')[0]
        .addEventListener('click', function() {}, false);

Also, you could use any library for mobile browsers. For example, jQuery Mobile (http://api.jquerymobile.com/vmouseover/, http://api.jquerymobile.com/vmouseout/). I can make an example if you need.

此外,您可以将任何库用于移动浏览器。例如,jQuery Mobile(http://api.jquerymobile.com/vmouseover/,http://api.jquerymobile.com/vmouseout/)。如果你需要,我可以举个例子。

#1

Set the transition in your .effectfront-class

在.effectfront-class中设置转换

.effectfront {
  border: none;
  margin: 0 auto;
 -webkit-transition: all 0.5s ease; /* Safari and Chrome */
  	 -moz-transition: all 0.5s ease; /* Firefox */
  	 -o-transition: all 0.5s ease; /* IE 9 */
  	 -ms-transition: all 0.5s ease; /* Opera */
  	 transition: all 0.5s ease;
}
.effectfront:hover {
  -webkit-transform: scale(12);
  -moz-transform: scale(12);
  -o-transform: scale(12);
  transform: scale(12);
  padding: 2px;
  background: rgba(0,0,0,0.5);
  border:1px solid rgba(0,0,0,1);
}
 <body><img class="effectfront" style="width:50px" src="https://sharetribe.s3.amazonaws.com/images/listing_images/images/100255/big/b4b8ry-cuaav_os.jpg?1427485186"style=height:80%> </body>

#2

You could use @keyframes (http://jsfiddle.net/sergdenisov/ksfuhors/3/):

你可以使用@keyframes(http://jsfiddle.net/sergdenisov/ksfuhors/3/):

.effectfront {
    border: none;
    margin: 0 auto;
}

.effectfront:hover {
    padding: 2px;
    -webkit-animation: myscale 2s 1;
    animation: myscale 2s 1;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 0, 0, 1);
}

@-webkit-keyframes myscale {
    0%   { -webkit-transform: scale(1); }
    25%  { -webkit-transform: scale(12); }
    90%  { -webkit-transform: scale(12); }
    100% { -webkit-transform: scale(1); }
}

@keyframes myscale {
    0%   { transform: scale(1); }
    25%  { transform: scale(12); }
    90%  { transform: scale(12); }
    100% { transform: scale(1); }
}

But I think it's strange behavior.

但我认为这是奇怪的行为。

Updated.

To understand the problem with iOS browsers, read this article — http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html.

要了解iOS浏览器的问题,请阅读本文 - http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html。

If you need to close scaled image when user clicks/taps on any other element on the page, I suggest 2 simple solutions:

如果您需要在用户点击/点击页面上的任何其他元素时关闭缩放图像,我建议2个简单的解决方案:

1. Add cursor: pointer for iOS browsers (http://output.jsbin.com/pagori):

1.添加光标:iOS浏览器的指针(http://output.jsbin.com/pagori):

HTML:

<body>
    <div class="body-wrapper">
        ...
    </div>
</body>

CSS:

html, body, .body-wrapper {
    height: 100%;
}

    .body-wrapper_ios {
        cursor: pointer;
    }

JS:

var userAgent = navigator.userAgent.toLowerCase();

if ((/(ipad|ipod|iphone)/i).test(userAgent)) {
    document.getElementsByClassName('body-wrapper')[0]
            .className += ' body-wrapper_ios';
}

2. Add empty click event handler to body-wrapper element (http://output.jsbin.com/bizizi):

2.将空单击事件处理程序添加到body-wrapper元素(http://output.jsbin.com/bizizi):

HTML:

<body>
    <div class="body-wrapper">
        ...
    </div>
</body>

CSS:

html, body, .body-wrapper {
    height: 100%;
}

JS:

document.getElementsByClassName('body-wrapper')[0]
        .addEventListener('click', function() {}, false);

Also, you could use any library for mobile browsers. For example, jQuery Mobile (http://api.jquerymobile.com/vmouseover/, http://api.jquerymobile.com/vmouseout/). I can make an example if you need.

此外,您可以将任何库用于移动浏览器。例如,jQuery Mobile(http://api.jquerymobile.com/vmouseover/,http://api.jquerymobile.com/vmouseout/)。如果你需要,我可以举个例子。

标签：

相关文章