Question

也许我应该将此作为Chrome的错误记录，但我想我会在这里查看是否有任何问题的解决方案。

我有一个简单的选择列表，在父div背景上使用CSS3动画。当我打开下拉列表并将鼠标移到不同的选项上时，蓝色条（悬停）会在我移动鼠标时跳转，特别是在列表中的最后一项上。

HTML：

<div id="backgroundContainer">
<select >
<option value="">-- Select a Test Case --</option>
<option value="1">Test1</option>
<option value="2">Test2</option>
<option value="3">Test3</option>
<option value="4">Test4</option>
<option value="5">Test5</option>
<option value="6">Test6</option>
<option value="7">Test7</option>
<option value="8">Test8</option>
</select>
</div>

CSS：

#backgroundContainer {
background-repeat: no-repeat;
background-color: #CCC;
background-image:url("https://appharbor.com/assets/images/stackoverflow-logo.png");
color: #fff;
height:500px;
width:100%;
-webkit-animation: moveUpDown 240s infinite linear;
}
@keyframes moveUpDown {
0% {
    background-position-y: 25%;
}
50% {
    background-position-y: 100%;
}
100% {
    background-position-y: 25%;
}
}
@-webkit-keyframes moveUpDown {
0% {
    background-position-y: 25%;
}
50% {
    background-position-y: 100%;
}
100% {
    background-position-y: 25%;
}
}

我在这里创建了一个jsFiddle：http://jsfiddle.net/ZfQU5/，它使用上面的代码。

请查看我是否做错了或是否有任何变通办法。当然，我可以删除背景动画，但仍然很奇怪它无论如何跳转。

谢谢，

Answer 1

麦克，

是的，整个页面都会在Chrome浏览器上跳转，而Chrome浏览器也会跳转，而不仅仅是下拉菜单。这不是一个错误，你的标记是错误的。它不会在IE中跳转，因为IE不了解关键帧，或者-webkit-keyframes。这就是跳跃的来源。您将菜单嵌套在标记内，因此菜单会选择跳转。我已经在Chrome上测试了它，无论开启还是没有开启，IE9，FF，以及后来我将运行IE10，而Opera只是为了看看它们对这种编码的反应，但我相信它会是一样的。< / p>

我的问题是：

你想尝试什么动画？
您是否希望从其中一个下拉选项中触发操作？
你打算有两份文件吗？一个.html和一个.css或只删除.html中的所有代码并有一个文件？

我修复了所有代码并让它按照我认为你想要的方式工作，但这是假设我做了你想要的。

Answer 2

麦克，

这是一些代码。你可以将盒子放在原处，只需按照CSS rules进行操作即可。

CSS3：

#backgroundContainer {
   width:100%;
   height:500px;
   position:relative;
   background: #CCCCCC url("https://appharbor.com/assets/images/stackoverflow-logo.png") no-repeat;
   animation: myOption 5s infinite linear;
   -webkit-animation: myOption 5s infinite linear; 
     }

@-keyframes mymove
      {
      0%    {background:left:0px; top:0px;}
      25%   {background:left:0px; top:-250px;}
      50%   {background:left:0px; top:500px;}
      75%   {background:left:0px; top:-250px;}
      100%  {background:left:0px; top:0px;}
      }

/* Safari and Chrome */
@-webkit-keyframes mymove
      {
      0%    {background:left:0px; top:0px;}
      25%   {background:left:0px; top:-250px;}
      50%   {background:left:0px; top:500px;}
      75%   {background:left:0px; top:-250px;}
      100%  {background:left:0px; top:0px;}
      }

这是html。

    <!DOCTYPE html>
    <html lang="en">
    <!-- <head>
      <link rel="stylesheet" type="text/css" href="css/bgContainer.css" /> 
    </head> -->
      <div id="backgroundContainer">
        <select >
            <option id="select" value="">-- Select a Test Case --</option>
                <option id="ov1" value="1">Test1</option>
                <option id="ov2" value="2">Test2</option>
                <option id="ov3" value="3">Test3</option>
                <option id="ov4" value="4">Test4</option>
                <option id="ov5" value="5">Test5</option>
                <option class="ov6" value="6">Test6</option>
                <option id="ov7" value="7">Test7</option>
                <option id="ov8" value="8">Test8</option>
                <option id="ov9" value="9">Test9</option>
                <option id="ov10" value="10">Test10</option>
        </select>
      </div>  
    </html>

You'll have to reset your timer, and your CSS import link, I didn't want to wait 240s every time I ran it.

该代码在此处显示：CodePen

WebPlatform.org

W3C.org

杰森，

Answer 3

它真的是bug webkit动画，我想你需要使用这个代码

<html>
<body>
<style type="text/css">
#backgroundContainer {
position: absolute;
background-repeat: no-repeat;
background-position: top center;
background-color: #CCC;
background-attachment: fixed;
background-image:url("https://appharbor.com/assets/images/stackoverflow-logo.png") ;


border-top: solid 10px #000;
    color: #fff;
    font-size: 14px;
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
    margin: 0;
    padding: 0 25px;
    height:500px;
    width:100%;
    -webkit-animation: moveUpDown 20s infinite linear;
    z-index:6;
}
@keyframes moveUpDown {
    0% {
        background-position-y: 25%;
    }
50% {
        background-position-y: 100%;
    }
100% {
        background-position-y: 25%;
    }
}
@-webkit-keyframes moveUpDown {
0% {
background-position-y: 25%;
}

50% {
        background-position-y: 100%;
    }
100% {
        background-position-y: 25%;
    }
}
.select{
    position: relative;
    z-index: 10;
}
&lt;/style&gt;
&lt;div style="position:relative; z-index:9;"&gt;
&lt;div id="backgroundContainer"&gt;
    &lt;/div&gt;
    &lt;div class="two"&gt;
&lt;select class="select"&gt;
&lt;option class="one" value=""&gt;-- Select a Test Case --&lt;/option&gt;
&lt;option class="one" value="1"&gt;Test1&lt;/option&gt;
&lt;option class="one" value="2"&gt;Test2&lt;/option&gt;
&lt;option class="one" value="3"&gt;Test3&lt;/option&gt;
&lt;option class="one" value="4"&gt;Test4&lt;/option&gt;
&lt;/select&gt;
&lt;/div&gt;
&lt;/div&gt;
</html>
</body>

也

我尝试使用它：

动画播放状态：暂停;

-webkit动画播放状态：暂停; / * Safari和Chrome * /

它不是选择元素的重新分区

Answer 4

我只想说我在客户的网站上遇到了类似的问题 - 当您尝试进行选择时，他们的选择元素的选择突出显示在跳转，但仅限于Chrome，然后仅限于Windows

我试了好几个小时来解决这个问题，包括为所有选择元素设置-webkit-animation为none，但似乎没有任何工作，我也没有看到任何动画设置。

嗯，长话短说，在整个页面上设置了一个-webkit-animation（在html元素上）！删除后，它解决了问题。

我只是想分享以防其他人今后遇到这样的问题。

选择列表/下拉鼠标悬停在Chrome中使用CSS3动画

4 个答案: