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 ponent:

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

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 ponent:

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

• javascript
• twitter-bootstrap
• reactjs

• Why wouldn't you use css? – nanobar Commented Oct 15, 2015 at 14:13
• Unsure how to change 3 elements from one rule – Bomber Commented Oct 15, 2015 at 14:19

1 Answer 1

The most simple solution uses CSS

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

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn./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./bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn./bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn./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/5v0osxce/

jQuery: http://jsfiddle/fehhemvo/

JavaScript: http://jsfiddle/t3mafrnr/1