CSS 过渡悬停（div 内的 h1 似乎无法正常工作）答案

【问题标题】：CSS transition hover (h1 inside a div seems not to work properly)CSS 过渡悬停（div 内的 h1 似乎无法正常工作）
【发布时间】：2016-11-06 10:19:54
【问题描述】：

我在 css 转换方面遇到了一点问题。在我的网站上，我有一个 div，在那个 div 中是一个 h1。

这是css代码。

#inner1 {
    background-image: url("rsz_astromenu1.jpg");
    height: 333px;
    width: 500px;
    display: inline-block;
    opacity: 0.5;
    font-size: 10px;
}
#inner1:hover {
    font-size: 50px;
    transition: font-size 1s linear;
    opacity: 1;
    transition: opacity 1s linear;
}

我想为不透明度（从 0.5 到 1）和字体大小（从 10 像素到 50 像素）设置动画。但是，当我将鼠标悬停在该 div 上时，不透明度会很好地过渡，但文本只会立即改变大小。所以悬停似乎起作用并改变了字体大小，为什么省略了过渡？

如果我将其设为#inner1 h1:hover，则过渡效果正常，但仅当我将鼠标悬停在文本上时。当我将鼠标悬停在该 div 上时，我想要字体大小的转换。

我试图解决这个问题并编写了一个用于放大文本的 JS 脚本。

这就是我想出的。由于内容不多，我也会粘贴所有 HTML 内容。

然而，这并不是很顺利，我已经达到了每毫秒只增加 0.09px 的程度，但它仍然看起来很颠簸，并且还会向浏览器发送数百个不必要的命令，对吧？

我该如何解决这个问题？使用 CSS 还是 JS？在此先感谢 ;)。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Gallery</title>
        <link rel="stylesheet" type="text/css" href="mainStyle.css">
    </head>
    <body>
        <div id="outer">
        <div id="middle">
        <div id="inner1" class="hover-menu">
            <h1 id="astro-h1" class="hover-menu">Astrofotografia</h1>
        </div>
        <div id="inner2"></div>
        </div>
        </div>
        <script>

        var JSinner1 = document.getElementById("inner1");
        var JSastroh1 = document.getElementById("astro-h1")
        JSastroh1.style.fontSize = "16px";


        var textBigger = function() {
            var newSize = parseFloat(JSastroh1.style.fontSize) + 0.009 + "px";
            window.setInterval(textBigger, 1)
            if (parseFloat(newSize) < 60) {

                JSastroh1.style.fontSize = newSize;
                console.log(newSize);
            }
        }
        JSinner1.addEventListener("mouseover", textBigger)




        </script>
    </body>
</html>

【问题讨论】：

标签： javascript html css

【解决方案1】：

您正在用另一个转换覆盖一个转换。试试

transition: font-size 1s linear,opacity 1s linear;

【讨论】：

【解决方案2】：

很简单，问题是你的:hoverselector，因为你添加了两个transitions属性，最后一个覆盖了前一个。为了使这项工作，只需将其添加到该规则：

transition: opacity 1s linear, font-size 1s linear;

或者你可以使用

transition: all 1s linear;

【讨论】：

哦。我的。上帝。我花了几个小时弄清楚这一点，并想知道为什么它不起作用。答案很简单。非常感谢；）。
很高兴我能提供帮助，当您遇到此类问题时，请使用 Chrome 开发工具或 Firebug，以便查看您的样式是否被其他选择器覆盖

【解决方案3】：

而不是使用

transition: font-size 1s linear;
transition: opacity 1s linear;

使用all

transition: all 1s linear;

或将两者合并为一个transition: font-size 1s linear,opacity 1s linear;

#inner1 {
    background-image: url("rsz_astromenu1.jpg");
    height: 333px;
    width: 500px;
    display: inline-block;
    opacity: 0.5;
    font-size: 10px;
}
#inner1:hover {
    font-size: 50px;
    opacity: 1;
    transition: all 1s linear;
}

<div id="inner1">
  <h1> Some text </h1>
</div>

【讨论】：

总的来说 all 属性在任何情况下都不应该使用。它可能会在移动设备和旧电脑/笔记本电脑上造成非常严重的死机。而不是这样做，他应该使用双转换属性：transition: opacity 1s, font-size 1s;

【解决方案4】：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style media="screen">
            #inner1 {
                background-image: url("rsz_astromenu1.jpg");
                height: 333px;
                width: 500px;
                display: inline-block;
                opacity: 0.5;
                font-size: 10px;
                transition: opacity 1s linear, font-size 1s linear;
            }
            #inner1:hover {
                font-size: 50px;
                opacity: 1;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="middle">
                <div id="inner1" class="hover-menu">
                    <h1 id="astro-h1" class="hover-menu">Astrofotografia</h1>
                </div>
                <div id="inner2"></div>
            </div>
        </div>
    </body>
</html>

【讨论】：