- This topic is empty.
-
AuthorPosts
-
November 29, 2011 at 2:48 pm #35389
OniLinkCR
MemberI 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!!!
November 29, 2011 at 2:53 pm #91540TheDoc
MemberCSS (in its current version) cannot do this. You’ll need to turn to your jQuery solution.
November 29, 2011 at 2:55 pm #91542OniLinkCR
MemberThat’s a bummer eh? I think that parent to child is great, but the opposite should also hold true.
November 29, 2011 at 3:54 pm #91553standuncan
MemberDo 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;
}
November 29, 2011 at 3:58 pm #91554standuncan
MemberOn 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.
November 29, 2011 at 6:31 pm #91565OniLinkCR
MemberHello 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');
});
});
November 29, 2011 at 11:27 pm #91579OniLinkCR
MemberFixed. Why?
November 29, 2011 at 11:33 pm #91580joshuanhibbert
MemberYou could do it using a pseudo-element, but as @standuncan already said, this is probably a bad idea for UX reasons.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.