Member Avatar for Stefce

How can i change the colors of the panels with css every panel to have different color on hover, i have this code:

<div class="container">
            <div class="row">
                <div class="col-sm-4">
                <a href="#">
                    <div class="panel panel-default trending">
                        <div class="panel-body">
                            <center>
                                <img src="images/trending.png" alt="Trending">
                                <h2>Trending</h2>
                            </center>
                        </div>
                    </div>
                </a>
                </div>
                <div class="col-sm-4">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <img src="images/popular.png" alt="Popular">
                            <h2>Popular</h2>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <img src="images/new.png" alt="New">
                            <h2>New</h2>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <img src="images/home.png" alt="Home">
                            <h2>Home</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>

CSS

body { 
    padding-bottom: 70px;
    padding-top: 10px;
}
.panel {
    height: 300px;
}
.panel:hover {
    background-color: lightblue;
}
Edited by Stefce
  • 2 Contributors
  • 1 Reply
  • 3K Views
  • 33 Minutes Discussion Span
  • Latest Post Latest Post by gentlemedia
Member Avatar for gentlemedia

You could give the panels a class of the color you want.
HTML:

<div class="panel panel-default blue">
    ...
</div>

<div class="panel panel-default green">
    ...
</div>

CSS:

.panel.blue { background-color: blue }
.panel.green { background-color: green }

Or if you don't want to add extra classes to your HTML markup, you could use the :nth-child() selector.

/* first panel */
.container .row .col-sm-4:nth-child(1) .panel {
    background-color: blue
}

/* second panel */
.container .row .col-sm-4:nth-child(2) .panel {
    background-color: green
}

/* etcetera */

But the latter with all these bootstrap classes looks downright ugly :) You might want to add some classes that gives some meaning to your content.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.