CSS：非绝对元素中的过渡+缩放

Question

我在这个网站上有问题： http://www.bacubacu.com/paybus/

如果您将鼠标悬停在底部的这 3 个大圆形按钮中的任何一个上，动画效果会很好（它们是绝对的）。

如果您将鼠标悬停在显示 "ver historial" 的位置，动画会跳到开头并停止，即使 "tap" class 仍处于活动状态。我发现它与元素定位有关（非绝对）。

我不知道为什么会这样，有谁能帮我解决一下吗？

这是 CSS 代码：

.touch{
    transition: transform 0.15s ease-out;
    -webkit-transition: -webkit-transform 0.15s ease-out;
} 
.touch.tap{
        -webkit-transform: scale3D(0.9,0.9,0.9);
   }

Answer 1

我认为你的意思是点击而不是悬停。悬停是将光标放在元素上。这是一个不同于点击的事件。我也认为你的 css 是错误的。我不知道你是否可以将转换作为转换的参数传递。最后我看到你 Jquery 并且点击时似乎运行。试试这个代码

HTML

<div id="tap_buttom" class="touch">
    <p>This is a button</p>
</div>

CSS

    .touch{
            border-radius: 10px;
            background: #ececec;
            padding: 10px;
            width: 150px;
            text-align: center;



            -webkit-transition: 0.1s ease-in-out;
            -moz-transition: 0.1s ease-in-out;
            -o-transition: 0.1s ease-in-out;
            transition: 0.1s ease-in-out;
            /* Line added by Alvaro Prieto */
            display: inline-block
    } 

.touch.tap
{
        -webkit-transform: scale3D(0.9,0.9,0.9);
        -moz-transform: scale3D(0.9,0.9,0.9);
        -o-transform: scale3D(0.9,0.9,0.9);
        -ms-transform: scale3D(0.9,0.9,0.9);
        transform: scale3D(0.9,0.9,0.9);
 }

jQuery

$(document).ready(function(){
    $(this).mousedown(function(){
        $("#tap_buttom").addClass("tap")
    })// end click function
    $(this).mouseup(function(){
        $("#tap_buttom").removeClass("tap")
    })// end click function

})// end document.ready

您可以在此处运行此代码 https://fiddle.jshell.net/15ryknk5/。我希望这有效

Answer 2

好的，我自己找到了答案。将 "display:inline-block" 添加到锚元素时，它会得到修复。我不知道问题出在哪里，对不起，如果我的问题不是太具体（我的英语也没有帮助嘿嘿）。

https://jsfiddle.net/15ryknk5/10/

display:inline-block;

CSS：非绝对元素中的过渡+缩放

CSS: transition + scale in non-absolute elements

css

transition

transform