Responsive Tetris board in pure HTML/CSS

Question

I'm trying to make a tetris board in html. I want to light the block each time you over it. So I made two div (1 block), the first div lights the two of them but I'm not able to make the second one light the first one. How can I make it work ?

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>

CSS doesn't have a previous sibling selector. You'll have to use JavaScript or jQuery. — Weafs.py, Jan 02 '15 at 08:54

SW4 · Answer 1 · 2015-01-02T09:27:07.847

This is due to the nature of CSS - in that selectors can only identify either child or subsequent sibling elements. As such, you can select the second div when hovering the first because it is a (subsequent) adjacent sibling, this you have done using the + selector.

However, in CSS you are not able to 'go the other way' and select the first div when hovering the second, there is no - supported selector to identify preceding elements.

Perhaps the easiest way to look at this is that in CSS, you can only select items that appear after the start tag of the item in question in your HTML.

In order to accomplish what you need, you can either use Javascript (e.g. jQuery .prev(), .next(), sliblings() etc) or group the elements within a parent and detect the :hover state of it, the issue with this is that as the children are different sizes, the parent block will exceed their outer irregular boundaries. This will mean that you will have instances of hovering within the parent area but not on one of the child blocks triggering the hover state. As such, I would recommend a Javscript solution (below is indicative only).

$('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>

Jonte · Accepted Answer · 2015-01-02T09:21:27.683

Don't know if this messes the positioning up for you, but one way of doing it is to put the two divs in a parent div. And in the css select all child elements.

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;
}

Responsive Tetris board in pure HTML/CSS

2 Answers2