Targeting a parent

[OniLinkCR]

I have a div with a border of 10px.

I have a button laying at the bottom right of said div. When I hover, the button changes background.

Simple thus far.

The problem is that I want the border to change color as well.

This is the inverse of parent child relationships. Basically I need to change the parent when a child is hovered.

Is this possible? I have done it via jQuery but would like to know if CSS has a selector that can do the same job, for obvious reasons.

Thanks in advance

The code is:

div.entry_info {

position: relative;

border:10px solid #91b8ce;}



div.entry_info p a.read_more {

position: absolute;

right:0;

bottom:0;

background:#91b8ce;

color: #fff;

}



div.entry_info p a.read_more:hover {

background: #c93356;

}

So basically I would like to change the border color of div.entry_info on p.read_more:hover.

Thanks guys!!!

[TheDoc]

CSS (in its current version) cannot do this. You’ll need to turn to your jQuery solution.

[OniLinkCR]

That’s a bummer eh? I think that parent to child is great, but the opposite should also hold true.

[standuncan]

Do you need it to change only on hover of the button or can it be the entire div? You could always:

div.entry_info {

position: relative;

border:10px solid #91b8ce;}



div.entry_info:hover {

border:10px solid #c93356;}



div.entry_info p a.read_more {

position: absolute;

right:0;

bottom:0;

background:#91b8ce;

color: #fff;

}



div.entry_info:hover p a.read_more {

background: #c93356;

}

[standuncan]

On second thought, the usability in that scenario would not be the best. Once you hover over the div and the entire border changes, it would give the assumption the entire div is a link vice just the anchor tag. But I guess it could be an option still.

[OniLinkCR]

Hello Stand.

The problem with your proposed solution is that it over the DIV, yeah, but the button stays the same color. The objective is that when the button is hovered, the entire DIV’s border changes colors. I did achieve it using jQuery like this:

$(document).ready(function(){



$('div.entry_info').hover (

function () {



$(this).addClass('hover_border');

$(this).find('a.read_more').addClass('read_more_jquery');

},



function () {



$('div.entry_info').removeClass('hover_border');

$('div.entry_info a.read_more').removeClass('read_more_jquery');

});



});

[OniLinkCR]

Fixed. Why?

[joshuanhibbert]

You could do it using a pseudo-element, but as @standuncan already said, this is probably a bad idea for UX reasons.

[Author]

Posts