0

我正在尝试用 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>
4

2 回答 2

3

这是由于 CSS 的性质——选择器只能识别子元素或后续兄弟元素。因此，您可以在div将第一个悬停时选择第二个，因为它是（后续）相邻的兄弟，这是您使用+选择器完成的。

但是，在 CSS 中，您不能“走另一条路”并div在将第二个悬停时选择第一个，没有-支持的选择器来识别前面的元素。

也许最简单的方法是在 CSS 中，您只能选择出现在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>

于 2015-01-02T08:57:09.243 回答
0

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

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;
}
于 2015-01-02T09:15:49.027 回答