Skip to main content

Forums

This topic contains 8 replies, has 0 voices, and was last updated by  OniLinkCR 7 years, 10 months ago.

Viewing 9 posts - 1 through 9 (of 9 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');
    });

    });

    #91576

    wolfcry911
    Participant

    This reply has been reported for inappropriate content.

    Is the parent div a dynamic or fixed size?

    #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 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star