Question

我正在尝试制作一个具有过渡悬停状态的矩形可伸缩div。我的代码似乎在Chrome和Firefox中运行良好，但IE10只是拒绝招待我。下面是我的代码和CSS示例。任何帮助都会很棒。

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
</head>
<body>
    <div class="quote">
        Interesting Quote
        <p class="name">Quote Author</p>
    </div>
</body>

CSS：

.quote {
    font-size: 2em;
    position: relative;
    width: 20%;
    padding: 5%;
    float: left;
    height: auto;
    margin: .5%;
    background-color: #99F;
    color: #fff;
    text-align: center;
}

.name {
    font-size: .5em;
    color: #000;
}

.quote:hover {
    transition: background-color 0.5s ease-out;
    background-color: #000;    
}

.quote:hover .name {
    transition: color 0.5s;
    color: #FFF;
}

将鼠标悬停在不工作的IE10上

0 个答案: