Question

有办法吗？我有一个菜单div，以红色背景，白色边框和白色文字开头。我想将它转换为白色背景和红色文本。我已经有了改变的背景，但是文字没有。我将不得不使用JQuery吗？

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>GEOMETRY</title>
        <link rel="stylesheet" href="infographic.css"/>
    </head>
    <body>
        <p class="h1">GEOMETRY</p>
        <p class="sub">Everything you never wanted to know.</p>
        <p class="mainp">You now when you try to re-visit your high school days, but you just can't? Like when you say to yourself, "Man, I really wish I was sitting in a high school classroom learning trigonometry right now," or, "Jesus, if only I could get someone to give me a bunch of work to do, on topics I'll never remember."</p>
        <p class="mainp">Well now, you've got a complete guiding resource to do it yourself!</p>
        <p class="mainp">Mostly...</p>
        <p class="mainp">This will give you all the information you always wish you never knew about four basic geometry concepts. Know exactly what  you're looking for? Use the buttons to skip ahead.</p>

        <div id="simp">
            <p class="menu">Simplifying Radicals</p>
        </div>
        <div id="pyth">
            <p class="menu">Pythagorean Theorem</p>
        </div>
        <div id="down">
            <div id="arrow"></div>
        </div>
        <div id="sp">
            <p class="menu">Special Triangles</p>
        </div>
        <div id="trig">
            <p class="menu">Trigonometry</p>
        </div>
    </body>
</html>

CSS：

@font-face {font-family: Hip Light; src: url("Fonts/Hipstelvetica UltraLight.ttf");}

body {
    background: #962626;
}

.h1 {
    text-align: center;
    color: white;
    font-family: Hip Light, Courier, Courier New, sans-serif;
    font-size: 100px;
    margin-bottom: 0px;
    margin-top: 70px;
    text-decoration: underline;
}

.sub {
    text-align: center;
    color: white;
    font-family: Courier, Courier New, sans-serif;
    margin-top: 0px;
    margin-bottom: 50px;
    font-size: 20px;
}

.mainp {
    text-align: center;
    color: white;
    font-family: Courier, Courier New, sans-serif;
    margin-left: 20%;
    margin-right: 20%;
}

#simp {
    height: 50px;
    width: 15%;
    float: left;
    margin-left: 6%;
    margin-top: 50px;
    border: 2px solid white;
    border-radius: 10px;
}

#pyth {
    height: 50px;
    width: 15%;
    float: left;
    margin-left: 2%;
    margin-top: 50px;
    border: 2px solid white;
    border-radius: 10px;
    tansition: background 1s, color 1s;
    -webkit-transition: background 1s, color 1s;
}

#pyth:hover {
    background: white;
    color: #962626;
}

#down {
    height: 80px;
    width: 6%;
    float: left;
    margin-left: 9%;
    margin-top: 50px;
    border: 2px solid white;
    border-radius: 10px;
}

#sp {
    height: 50px;
    width: 15%;
    float: right;
    margin-right: 6%;
    margin-top: 50px;
    border: 2px solid white;
    border-radius: 10px;
}

#trig {
    height: 50px;
    width: 15%;
    float: right;
    margin-right: 2%;
    margin-top: 50px;
    border: 2px solid white;
    border-radius: 10px;
}

.menu {
    color: white;
    text-align: center;
    font-family: Courier, Courier New, sans-serif;
}

Answer 1

我认为您可以按照以下方式执行此操作，因为您可能希望拥有所有transition包括边框，背景颜色，文本颜色等等。并且它很好想最后声明无前缀的属性。

-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
transition: all 1s ease;

你应该最后声明无前缀属性的原因是   因为这是属性如何在规则中级联：浏览器将始终如此   使用最后一个适用的。 a的前缀和未加前缀的版本   属性被视为与级联相同的属性，   所以你希望浏览器尽力遵守标准   申请该财产。

如果浏览器实现前缀而不是标准，那很好，   但如果它同时实现，则要确保它使用标准   代替。您可以通过最后声明标准属性来完成此操作。 - BoltClock♦

简化演示：

＆＃13;

body {
    background: #962626;
}
#E {
    height: 50px;
    width: 200px;
    text-align: center;
    color: white;
    border: 2px solid white;
    border-radius: 10px;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}
#E:hover {
    background: white;
    color: #962626;
}

＆＃13;

<div id="E">
    <p class="menu">Pythagorean Theorem</p>
</div>

＆＃13;

Answer 2

您的CSS存在两个问题。

req.text缺少tansition
r覆盖了文字样式。

这些很容易修复：

.menu { color: white; }

body {
    background: #962626;
}
#pyth {
    height: 50px;
    width: 15em;
    float: left;
    margin-left: 2%;
    margin-top: 5px;
    border: 2px solid white;
    border-radius: 10px;
    color:white;
    transition: background 1s, color 1s;
    -webkit-transition: background 1s, color 1s;
}

#pyth:hover {
    background: white;
    color: #962626;
}

.menu {
    text-align: center;
    font-family: sans-serif;
}

Answer 3

实际上，答案很简单。只需在过渡结束时添加“轻松”即可。像这样：

    <span class="align-left"><p><input type="submit" name="prev" class="big-button"
value="<- Prev" /><input type="submit" name="next" class="big-button"
value="Next ->" /></p></span>

虽然你的目前设置为1秒，但我建议只做0.5秒，因为它更快，看起来更好。

如何使用CSS转换更改文本颜色？

3 个答案: