html - 按钮 'popping'

标签 html css internet-explorer

我正在处理的网站有弹出 slider 按钮,我不确定为什么。我知道它与 transform: translateY 属性有关,但是更改设置、查看文件——都没有任何结果(据我所知)。

IE翻译动画的跳转按钮到底是怎么弄的?

网站(供引用)https://fishfighterproducts.com 顶部的 slider (红色按钮)

最佳答案

按钮的样式是:

.home-intro-slider .home-slider-btn {
    font-size: 2.5vmin;
    background: linear-gradient( #c10000, #660000);
    color: white;
    text-shadow: -.2vmin -.1vmin black;
    text-transform: uppercase;
    display: block;
    clear: both;
    padding: 2% 10%;
    box-shadow: 0px .2vmin #330000 !important;
    border-bottom: .5vmin solid #330000 !important;
    border-right: .25vmin solid #330000 !important;
    border-top: none;
    border-left: none;
    border-radius: .5vmin;
    margin: 0px 5%;
    -webkit-transition: all 150ms ease-in-out !important;
    -ms-transition: all 150ms ease-in-out !important;
    transition: all 150ms ease-in-out !important;
}
.home-intro-slider .home-slider-btn:hover {
    box-shadow: 0px .1vmin #330000 !important;
    -webkit-transform: translateY(.2vmin);
    -ms-transform: translateY(.2vmin);
    transform: translateY(.2vmin);
    -webkit-transition: all 150ms ease-in-out !important;
    -ms-transition: all 150ms ease-in-out !important;
    transition: all 100ms ease-in-out;
}
.home-intro-slider .home-slider-btn:active {
    -webkit-transform: translateY(4px) !important;
    -ms-transform: translateY(4px) !important;
    transform: translateY(4px) !important;
    border-bottom: none !important;
    -webkit-transition: all 150ms ease-in-out !important;
    -ms-transition: all 150ms ease-in-out !important;
    transition: all 150ms ease-in-out !important;
}

只需删除 :hover 和 :active 部分。

我通过右键单击按钮进行检查找到了它,类是 home-slider-btn heading-lefthome-slider-btn 似乎最有可能如此通过样式窗口中提供的链接,我转到了the css file。我在哪里搜索了类(class)。

关于html - 按钮 'popping',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42262176/

相关文章:

html - 水平 CSS3 Accordion 固定滞后过渡

javascript - 多个导航更新 Jquery

asp.net - 如何将多个 "CssClass"分配给 asp.net 中的控件

html - 将图像重叠在彩色 div 上

css - 当键盘打开或地址栏消失时,如何阻止浏览器在移动设备上调整大小?

css - 在 razor mvc3 中使用库中的 css

css - 伪标签 "before"& "after",border-left 在 IE 中不起作用

javascript - 使用 AJAX 递归调用服务器在 Internet Explorer 中不起作用

html - 在 Angular 中,不会为 angular mat-option 调用 onSelectionChange

python - 我如何使用 python 将输出打印到 html 页面?