Interactive layout for Tetris created using only HTML and CSS

Currently, I am working on creating a Tetris board using HTML. My goal is to illuminate the block each time it is hovered over. However, I have encountered an issue where the first div lights up both blocks, but the second one does not light up the first block as desired. How can I resolve this problem?

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

The reason for this behavior lies in the constraints of CSS selectors, which can only target child or subsequent sibling elements. This means that while you can style the second div when hovering over the first one because they are adjacent siblings (using the + selector), you cannot do the reverse - selecting the first div when hovering over the second, as there is no supported - selector for preceding elements.

To achieve the desired effect, options include utilizing JavaScript functionalities such as jQuery's .prev(), .next(), and siblings(), or grouping the elements within a parent container and detecting the hover state on that element. However, the latter approach may lead to complications due to varying sizes of the child elements potentially causing hover states to misfire within the parent block boundaries.

A recommended solution involves using JavaScript, where an event listener can be added to handle the hover functionality efficiently. An example code snippet is provided below:

$('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: 0;
  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

If you're worried about the positioning getting messed up, one solution is to place both divs within a parent div and use CSS to target all child elements.

Here's an example:

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display an "add to cart" button and a discount image when hovering over

Currently, I am in the process of developing an Online Shopping website using PHP. To enhance the design of my website, I have implemented bootstrap. One specific query I have is how to display an 'add to cart' button and a discount image when a ...

I am in need of a blank selection option using an md-select element, and I specifically do not want it to be

I'm currently utilizing Angular Material with md-select and I am in need of creating a blank option that, when selected, results in no value being displayed in the select dropdown. If this blank option is set as required, I would like it to return fal ...

Methods to disregard class prefix in css document

When I inspect elements in the Chrome console, I notice styles applied to certain divs/buttons like this: /* Sample Chrome browser styles */ .ItemClass1-0-3-171.ItemClass2-0-3-173: { background-color: "red" } I'm wondering how I can def ...

Comparison between a static website and a MySQL-generated website

One of the features on my website allows users to create a webpage to showcase their products. Once a page is created, it remains unchanged. Now, I'm trying to decide whether it's more efficient to store the page content (with only certain edita ...

Opacity effect on input text when it exceeds the input boundaries

I'm having an issue: I need to create inputs with different states, including when the text is longer than the input itself. In this case, the extra text should fade out with a gradient transparency effect: https://i.sstatic.net/r5qQu.jpg Here is my ...

How can I retrieve a keysList from an indexed database containing keys that begin with the specified "some string"?

function findEmailsByFirstName() { try { var result = document.getElementById("result"); result.innerHTML = ""; if (localDatabase != null && localDatabase.db != null) { var range = IDBKeyRange.lowerBound("john"); var ...

Prevented: Techniques for providing extra cushioning for a button, but with the condition that it contains an external icon

How can I apply padding to a button only if it contains an external icon? If the button has an external icon, I want to give it padding-right: 30px (example). However, if there is no external icon present, then the button should not have the 30px padding. ...

Angular CSS: Customizing expansion panels to align items at the top regardless of their current status

I am currently working on creating my own expansion panel using Angular. I want to replicate the behavior of the Angular Material Expansion Panel, but it does not fully meet my requirements. My custom expansion panel consists of 3 main elements: a starti ...

Add aesthetic flair to scrollable containers

I am currently working on displaying data in columns using ngFor. However, I've run into an issue where the styles I apply to the column div are only visible on the top part of the column. As I scroll down to the bottom, the styles disappear. I believ ...

Discovering the required rotation angle for an object to directly face another using JS HTML5 CANVAS

Hey there, I'm currently working on a game project in Javascript where I have a player and a cursor. I already know the positions of both objects, but what I need help with is determining the angle in degrees or radians that the player needs to rotate ...

After deployment, certain formatting elements appear to be skewed in the React application

After developing a React app with create-react-app, everything was working perfectly. However, upon deployment, I noticed that some styles weren't showing up as expected. The majority of the styling from Material UI is intact, but there are a few dis ...

Incorporating a dropdown menu into an HTML table through jQuery proves to be a

I loaded my tabular data from the server using ajax with json. I aimed to generate HTML table rows dynamically using jQuery, with each row containing elements like input type='text' and select dropdowns. While I could create textboxes in columns ...

Implementing transparency to clip-path using HTML and CSS

How can I apply opacity to the clip-path/clip area, similar to the image shown below? Please find my code snippet for reference: .item--clip .demo { width: 200px; height: 250px; } .item--clip .has-mask { position: absolute; clip: rect(10px, 19 ...

Trying to solve my UI issues using CSS, perhaps?

Currently, I am facing a multitude of UI issues as shown in the attached snapshot: The alignment of fields is haphazard, there are spacing inconsistencies between them, and the field lengths do not match up. Is there any CSS code that I can apply to recti ...

The col-md-6 grid does not adapt well for mobile responsiveness

I'm facing an issue with the layout of a section on my desktop site - when viewed on mobile, the image overlaps everything else. I need the image to be above and the orange box below on mobile. Desktop https://i.sstatic.net/Tu05k.jpg MOBILE https:/ ...

display a div positioned relatively next to another div

I'm having trouble displaying a textbox next to another div on my webpage. Instead of appearing next to the div, it is showing up below it. The textbox needs to have an absolute position. You can see the issue in action by checking out this demo. Than ...

Increase the thickness of the scrollbar track over the scrollbar thumb

I've come across several discussions on making the track thinner than the scrollbar thumb, but I'm looking to do the opposite. Is it possible to have a scrollbar track that is thicker than the scrollbar thumb? ...

The feature to swap out the thumb of a range slider with an image is currently not

I'm attempting to design a unique range slider using CSS. <style> .slide-container { width: 300px; } .slider { -webkit-appearance: none; width: 100%; height: 5px; border-radius: 5px; background: #FFFFFF; outline: none; opacity: ...

Display a HTML table when hovering over text

I am looking to display a table when hovering over text, and I have implemented this basic jquery/CSS code: <meta charset="utf-8" /> <title></title> <link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesh ...

Tips for creating sections of an image that appear to glow when hovered over

I have a client who is affiliated with a local legion and specializes in restoring military regiment photos. He wants me to create a website where users can hover over each person in the photo, causing their outline to glow while displaying a tool tip with ...