Question

我正在制作一个彩色记忆作为练习，玩家应该将他/她的鼠标悬停在特定位置，然后显示颜色代码。然后按下按钮，按照正确的顺序输入代码。唯一的问题是当玩家徘徊按钮时，由于某种原因显示颜色，即使他们在我的CSS文件中没有：hover属性。此外，按钮移动就像它们连接到颜色方块一样，即使它们也没有连接到那里。到目前为止，这是我工作的jsfiddle文件，我已经澄清了问题：https://jsfiddle.net/109x7g46/1/（这里是CSS内容）：

body
{
background-color: #525252;

}
.olle{
width: 100px;
height: 100px;
    position: absolute;
    top: 40%;
    left: 24%;
    transition: background-color 5s ease;
   -webkit-transition: 100s;
    transition: 1s all;   
    transition-delay: 100s; 
    animation-iteration-count: 1;

}
.olle:hover
{
    width: 700px;
    height: 100px;
animation: 125s multicolor;
-webkit-animation: 125s multicolor;
  -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
    animation-iteration-count: 1;

}
}
@keyframes multicolor {

    1% {
        background: green;
        z-index: 2;
    }
    2% {
        background: yellow;
        z-index: 2;
    }
    3% {
        background: blue;
        z-index: 2;
    }
    4%{
        background: red;
        z-index: 2;
    }
    5%{
        background: cyan;
        z-index: 2;
    }
    6%{
        background: yellow;
        z-index: 2;
    }
    7%{
        background: #525252;
        z-index: 2;
    }
    100%{
        background: #525252;
        z-index: 2;
    }
}
@-webkit-keyframes multicolor {

    1% {
        background: green;
        z-index: 2;
    }
    2% {
        background: yellow;
        z-index: 2;
    }
    3% {
        background: blue;
        z-index: 2;
    }
    4%{
        background: red;
        z-index: 2;
    }
    5%{
        background: cyan;
        z-index: 2;
    }
    6%{
        background: yellow;
        z-index: 2;
    }
    7%{
        background: #525252;
        z-index: 2;
    }
    100%{background: #525252;
    z-index: 2;
    }
}
input[name='gron']{
    height: 30px;
    width: 30px;
    background-color: green;
    position: absolute;
    left: 40%;
    top: 200%;
    z-index: 3;
}
input[name='gul']{
    height: 30px;
    width: 30px;
    background-color: yellow;
    position: absolute;
    left: 50%;
    top: 200%;
    z-index: 3;
}
input[name='bla']{
    height: 30px;
    width: 30px;
    background-color: blue;
    position: absolute;
    left: 20%;
    top: 200%;
    z-index: 3;
}
input[name='rod']{
    height: 30px;
    width: 30px;
    background-color: red;
    position: absolute;
    left: 30%;
    top: 200%;
    z-index: 3;
}
input[name='cyan']{
    height: 30px;
    width: 30px;
    background-color: cyan;
    position: absolute;
    left: 60%;
    top: 200%;
    z-index: 3;
}
input[name='level3']{
    height: 40px;
    width: 60px;
    background-color: black;
    color: white;
    position: absolute;
    left: 37%;
    top: 250%;

}

我的目标是

A）当播放器悬停文本（而不是按钮）时，方形扩展和颜色更改。

B）没有按钮随着展开的方块移动，而是有一个固定的位置（为什么position: absolute;不足以满足这个要求？）。

C）最好只显示颜色代码/更改一次，但我想这是不可能的，因为按钮点击会刷新页面。

我只想使用CSS和HTML，因此涉及JavaScript的解决方案无关紧要。

Answer 1

HTML中有一个未公开的<div>：

<div class="olle"><!-- <-- this is unclosed -->
<div class="olle2"></div>

像这样打开标签会导致像您一样的未定义行为。

CSS：hover属性错误地为多个元素工作

1 个答案: