0

我有以下代码：html： 

<html>
<head>
  <link rel="stylesheet" type="text/css" href="StyleSheet.css">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>What</title>
    <style type="text/css">
    </style>

</head>
<body dir="rtl">
    <div id="page">
        <div id="bothcontainer">
            <div id="littlebox1" class="littlebox1sentence">put your mouse here</div>
            <div id="littlebox1" class="triangle">
                <div class="triangleborder"></div>
            </div>
        </div>
        <div id="box1">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
        </div>
    </div>


</body>
</html>

和 CSS3：

#page {
    width: 900px;
    padding: 0px;
    margin: 0 auto;
    direction: rtl;
    position: relative;
}

#box1 {
    position: relative;
    width: 500px;
    border: 1px solid black;
    box-shadow: -3px 8px 34px #808080;
    border-radius: 20px;
    box-shadow: -8px 5px 5px #888888;
    right: 300px;
    top: 250px;
    text-align: justify;
    -webkit-transition: all 1s;
    font-size: large;
    color: Black;
    padding: 10px;
    background: #D0D0D0;
    opacity: 0;
}


@-webkit-keyframes myFirst {
    0% {
        right: 300px;
        top: 160px;
        background: #D0D0D0;
        opacity: 0;
    }

    100% {
        background: #909090;
        right: 300px;
        top: 200px;
        opacity: 1;
    }
}

#littlebox1 {
    top: 200px;
    position: absolute;
    display: inline-block;
}

.littlebox1sentence {
    font-size: large;
    padding-bottom: 15px;
    padding-top: 15px;
    padding-left: 25px;
    padding-right: 10px;
    background: #D0D0D0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    -webkit-transition: background .25s ease-in-out;
    border-bottom: 2px solid red;
    border-right: 2px solid red;
    border-top: 2px solid red;
    -webkit-transition-property:color, background; 
-webkit-transition-duration: .25s, .25s; 
-webkit-transition-timing-function: linear, ease-in;


}

#bothcontainer:hover ~ #box1 {
    -webkit-transition: all 0s;
    background: #909090;
    right: 300px;
    top: 200px;
    -webkit-animation: myFirst .75s;
    -webkit-animation-fill-mode: initial;
    opacity: 1;
}

#bothcontainer:hover .littlebox1sentence {
    background: #909090;
    color:#D0D0D0
}

#bothcontainer:hover .triangle {
    border-right: 20px solid #909090;
}

.triangle {
    position: relative;
    width: 0;
    height: 0;
    border-right: 20px solid #D0D0D0;
    border-top: 26px solid transparent;
    border-bottom: 25px solid transparent;
    right: 186px;
    -webkit-transition: border-right .25s ease-in-out;
    margin-top: 2px;

}

.triangleborder {
    position: absolute;
    width: 0;
    height: 0;
    border-right: 22px solid red;
    border-top: 28.5px solid transparent;
    border-bottom: 27.5px solid transparent;
    right: -20px;
    -webkit-transition: border-right .25s ease-in-out;
    top: -28px;
    z-index: -15656567650;

}

现场示例：http://jsfiddle.net/VhGBv/

如您所见，当我将鼠标放在灰色框上时，背景和字体颜色不会同时发生变化。我的问题是：如何对动画进行计时，以便当我将鼠标放在灰色句子上时，箭头和灰色框会同时（一起）改变颜色？

4

1 回答 1

2

固定在这里：http: //jsfiddle.net/VhGBv/1/

我改变了这一行：

.littlebox1sentence {
    ...
    -webkit-transition-timing-function: linear, ease-in-out;
}
于 2012-12-05T18:51:30.113 回答