Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #35389
    OniLinkCR
    Member

    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!!!

    #91540
    TheDoc
    Moderator

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

    #91542
    OniLinkCR
    Member

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

    #91553
    standuncan
    Member

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

    #91554
    standuncan
    Member

    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.

    #91565
    OniLinkCR
    Member

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

    });

    #91579
    OniLinkCR
    Member

    Fixed. Why?

    #91580

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.