change background color of component on hover

Question

Is there a way I can change the background color of the whole panel when I hover over any part of it?

I am using a basic boostrap panel, using bootstrap-react:

<LinkWrapper url={url}>
    <Panel header="text" bsStyle="primary">
    <p>text.</p>
    </Panel>
</LinkWrapper>

Which generates the following markup:

<div class="panel panel-primary" >
    <div class="panel-heading" >text</div>
    <div class="panel-body">
        <p>text</p>
    </div>
</div>

My linkWrapper component:

var LinkWrapper = React.createClass({
    getDefaultProps: function() {
        return {
        }
    },

    render: function() {
        return (
            <a href={this.props.url}>{this.props.children}</a>
        )
    }
});

module.exports = LinkWrapper;

My CSS is:

a.highlight:hover{
    text-decoration:none;
    color:white;
}

.highlight .panel-body:hover, .highlight .panel-heading:hover {
    text-decoration:none;
    background-color:$primary-color;
    color:white;
    border-color:$primary-color;
}

.highlight .panel-body p:hover {
    text-decoration:none;
    color:white;
}

Why wouldn't you use css?

nanobar
– nanobar

2015-10-15 14:13:51 +00:00
Commented Oct 15, 2015 at 14:13 — nanobar
– nanobar, Commented Oct 15, 2015 at 14:13
Unsure how to change 3 elements from one rule

Bomber
– Bomber

2015-10-15 14:19:40 +00:00
Commented Oct 15, 2015 at 14:19 — Bomber
– Bomber, Commented Oct 15, 2015 at 14:19

Richard Hamilton · Accepted Answer · 2015-10-15 17:49:54Z

The most simple solution uses CSS

#my-panel:hover * {
    background: gold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div id="my-panel" class="panel panel-primary" >
    <div id="panel-header" class="panel-heading" >text</div>
    <div id="panel-body" class="panel-body" >
        <p >text</p>
    </div>
</div>

The above code finds the panel we're looking for and attaches the pseudo-element :hover to it. It then finds all of its descendants with the universal selector, *.

You can also do it in jQuery. Listen for the mouseover and mouseout events as they represent when a mouse is hovering over and away from an element resepectively.

During the mouseover event, add a class for changing the background color. But because Bootstrap classes have styles already, you need to use the !important declaration. During the mouseout event, simply remove this class.

$(document).ready(function() {
    	$(".panel").on("mouseover", function() {
            $(this).children().addClass("gold");
        }).on("mouseout", function() {
            $(this).children().removeClass("gold");
        });
    });

.gold { background: gold !important };

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="my-panel" class="panel panel-primary" >
    <div id="panel-header" class="panel-heading" >text</div>
    <div id="panel-body" class="panel-body" >
        <p >text</p>
    </div>
</div>

The JavaScript solution is similar to the jQuery one. Create variables for finding the body and header of the panel. You can listen for events either through inline events (ie onclick) or using addEventListener.

To add or remove classes, use the classList.add and classList.remove methods respectively.

var panel = document.getElementById("my-panel");
var panelHeader = document.getElementById("panel-header");
var panelBody = document.getElementById("panel-body");

panel.addEventListener("mouseover", function() {
    panelHeader.classList.add("gold");
    panelBody.classList.add("gold");
});

panel.addEventListener("mouseout", function() {
    panelHeader.classList.remove("gold");
    panelBody.classList.remove("gold");
});

.gold { background: gold !important };

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div id="my-panel" class="panel panel-primary" >
    <div id="panel-header" class="panel-heading" >text</div>
    <div id="panel-body" class="panel-body" >
        <p >text</p>
    </div>
</div>

Fiddles

CSS: http://jsfiddle.net/5v0osxce/

jQuery: http://jsfiddle.net/fehhemvo/

JavaScript: http://jsfiddle.net/t3mafrnr/1

Collectives™ on Stack Overflow

change background color of component on hover

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related