Hover effect on nested divs with the same structure

Question

Hover effect on nested divs with the same structure

Check out this link: http://jsfiddle.net/2hDB9/

I'm trying to achieve the following effect:

When hovering over Line 1, only the border of Line 1 should show.
If you hover over Line 2, only the border of Line 2 should be displayed, not both at the same time.

Here is the HTML structure:

<div class="container">
    <div class="box">
        Line 1.
        <div class="box">
            Line 2.
        </div>
    </div>
</div>

These are the CSS styles applied:

.container {
    width: 500px;
}

.box {
    padding: 12px;
    border: 1px solid grey;
}

.box:hover {
    border-color: red;
}

css

Answer 1

Answer №1

To achieve the desired effect, you will need to create two separate CSS classes for each Div element. Simply assign both Divs with the same class="box", this way the .box:hover command will be applied to both of them.

In the CSS code, specify that only the inner .box class should respond to the hover command:

.box .box:hover {
      border-color: red; }

Check out the solution here: http://jsfiddle.net/2hDB9/2/

Answer 2

To achieve the desired effect, you will need to create two separate CSS classes for each Div element. Simply assign both Divs with the same class="box", this way the .box:hover command will be applied to both of them.

In the CSS code, specify that only the inner .box class should respond to the hover command:

.box .box:hover {
      border-color: red; }

Check out the solution here: http://jsfiddle.net/2hDB9/2/

Answer 3

Answer №2

If you want all classes to have the same style, it's not entirely achievable using only CSS.

Although the current responses touch on some aspects of this issue, I can offer a jQuery solution where all elements share the same class. However, I recommend renaming the classes and avoiding jQuery if possible.

Nevertheless, here is an alternative approach that doesn't necessitate changing the class names:

Explore this jsFiddle example - suitable for various scenarios.

$(".box").children().hover(function () {
    $(this).parent().css("border-color", "grey");
    $(this).css("border-color", "red");
}, function () {
    $(this).parent().css("border-color", "");
    $(this).css("border-color", "");
});

Answer 4

If you want all classes to have the same style, it's not entirely achievable using only CSS.

Although the current responses touch on some aspects of this issue, I can offer a jQuery solution where all elements share the same class. However, I recommend renaming the classes and avoiding jQuery if possible.

Nevertheless, here is an alternative approach that doesn't necessitate changing the class names:

Explore this jsFiddle example - suitable for various scenarios.

$(".box").children().hover(function () {
    $(this).parent().css("border-color", "grey");
    $(this).css("border-color", "red");
}, function () {
    $(this).parent().css("border-color", "");
    $(this).css("border-color", "");
});

Answer 5

Answer №3

Changing its class would be a good idea. Instead of relying on JavaScript to determine the hovered element, a better alternative might be:

Consider using

.container > .box > .box:hover

Answer 6

Changing its class would be a good idea. Instead of relying on JavaScript to determine the hovered element, a better alternative might be:

Consider using

.container > .box > .box:hover

Answer 7

Answer №4

Latest Update: http://jsfiddle.net/2hDB9/11/

In order to achieve the desired effect, you need to get a little creative. It involves some trickery to make it look like one element is nested within another. Below is the code snippet:

HTML:

<div class="container">
    <div class="box1">
        Line 1.
    </div>
    <div class="box2">
        Line 2.
    </div> 
</div>

CSS:

.container {
    height:50px;
    padding:50px;
}

.container:hover {
}

.box2 {
    height:50px;
    width:75%;
    border:2px solid black;
    position: relative;
    top: -110px;
}

.box2:hover {
    border:2px solid red;
}

.box1{
    position: relative;
    height:50px;
    padding: 20px 20px 40px 20px;
    top: -50px;
    left: -50px;
    border:2px solid black;

}

.box1:hover{
    border:2px solid blue;
}

By creatively using relative positioning in CSS, box2 can be visually manipulated to appear as a child of box1, even though they are actually siblings.

Answer 8

Latest Update: http://jsfiddle.net/2hDB9/11/

In order to achieve the desired effect, you need to get a little creative. It involves some trickery to make it look like one element is nested within another. Below is the code snippet:

HTML:

<div class="container">
    <div class="box1">
        Line 1.
    </div>
    <div class="box2">
        Line 2.
    </div> 
</div>

CSS:

.container {
    height:50px;
    padding:50px;
}

.container:hover {
}

.box2 {
    height:50px;
    width:75%;
    border:2px solid black;
    position: relative;
    top: -110px;
}

.box2:hover {
    border:2px solid red;
}

.box1{
    position: relative;
    height:50px;
    padding: 20px 20px 40px 20px;
    top: -50px;
    left: -50px;
    border:2px solid black;

}

.box1:hover{
    border:2px solid blue;
}

By creatively using relative positioning in CSS, box2 can be visually manipulated to appear as a child of box1, even though they are actually siblings.

Hover effect on nested divs with the same structure

Answer №1

Answer №2

Answer №3

Answer №4

Latest Update: http://jsfiddle.net/2hDB9/11/

Similar questions

Focusing on a particular iframe

The output of console.log in a browser context versus a code environment can vary

The Struggle with Bootstrap Accordion

Ideas for designing nested grids/boxes with a touch of style

Troubleshooting Gulp Conversion of Bootstrap-Material Scss to CSS: Error Message "Import Not Found"

How can I display only the initial image using php?

What could be causing my CSS code to not function properly within Vue.js?

Boost the dimensions of the content property within a CSS class

The mobile menu pop-up is malfunctioning

Content within Drawer featuring Material UI Scrollable Tabs

Struggling to toggle the visibility of a table with a button - successfully hiding it, but unable to make it reappear?

Incorporating SASS/SCSS syntax within the <style> element

What is the best way to adjust the height of a div based on its child content

Is there a way to spin these hexagons around?

Align the HTML element to the right edge of its sibling element that is centered on the

How come my DHTML navigation bar is displaying incorrectly in Internet Explorer 7?

Guide to incorporating external CSS and JavaScript into an Angular 2 project with Express.js and Node.js

Unable to move the content inside a fixed container by scrolling

Troubleshooting the inability to set percentage values in Bootstrap styling

CSS designs overlapping