纯 HTML/CSS 中的响应式俄罗斯方块板

Question

我正在尝试在 html 中制作俄罗斯方块棋盘。每次你经过它时，我都想点亮它。所以我制作了两个 div（1 个方块），第一个 div 点亮了其中两个，但我无法让第二个点亮第一个。我怎样才能让它发挥作用？

CSS :

div{
    width: 200px;
    height: 200px;
    background-color: 0000ff;
    margin: 0px;
}

#div1{
    float:left;
    height:600px;
}

#div2{
    float:left;
    width:200px;
}

#div1:hover + #div2{
    background-color: #0082ff;
}

#div1:hover{
    background-color: #0082ff;
}

#div2:hover - #div1{
    background-color: #0082ff;
}

#div2:hover{
    background-color: #0082ff;
}

HTML :

<html>
    <head>
        <link href="style.css" type="text/css" rel="stylesheet">
        <title>hover test</title>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
    </body>
</html>

Answer 1

这是由于 CSS 的性质 - 因为 selectors 只能标识子元素或后续同级元素。因此，当悬停第一个时，您可以 select 第二个 div 因为它是（后续的）相邻兄弟，您已经使用 + select 或 select 完成了此操作。 =21=]

但是，在 CSS 中，您无法 'go the other way' 和 select 第一个 div 当悬停第二个时，不支持 - select或识别前面的元素。

也许最简单的查看方式是在 CSS 中，您只能 select 出现在之后项目开始标记的项目在您的 HTML.

中有问题

为了完成您的需要，您可以使用 Javascript（例如 jQuery .prev()、.next()、sliblings() 等）或组父级中的元素并检测它的 :hover 状态，这个问题是由于子级大小不同，父级块将超出它们的外部不规则边界。这将意味着您将在父区域内有悬停的实例，但不会在触发悬停状态的子块之一上。因此，我会推荐一个 Javscript 解决方案（以下仅供参考）。

$('div').on('mouseover', function() {
  $(this).addClass('hover');
  $(this).siblings('div').addClass('hover');
});
$('div').on('mouseout', function() {
  $('.hover').removeClass('hover');
});

div {
  width: 200px;
  height: 200px;
  background-color: 0000ff;
  margin: 0px;
  border: 1px solid grey;
}
#div1 {
  float: left;
  height: 600px;
}
#div2 {
  float: left;
  width: 200px;
}
.hover {
  background-color: #0082ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2"></div>

Answer 2

不知道这是否会打乱您的定位，但一种方法是将两个 div 放在父 div 中。并在 css select 所有子元素中。

html:

<body>
    <div class="tile">
        <div class="filled" id="div1"></div>
        <div class="filled" id="div2"></div>
    </div>
</body>

css:

div.filled{
    width: 200px;
    height: 200px;
    background-color: #0000ff;
    margin: 0px;
}

div#div1{
    float:left;
    height:600px;
}

div#div2{
    float:left;
    width:200px;
}

div.tile:hover > .filled{
    background-color: #0082ff;
}

纯 HTML/CSS 中的响应式俄罗斯方块板

Responsive Tetris board in pure HTML/CSS

html

css

tetris