raulbaros raulbaros - 3 months ago 17
CSS Question

Change font-color of all divs inside a div when hover over

Suppose I have one div with several

div
elements inside. When hovering over the parent
div
, I want to change the font-color for all of the text inside the child
div
elements.

When
:hover
is applied, the background-color should become green and all text inside the well should become blue.

However, this is not happening. Here's my code:



well:hover {
background-color: green;
color: blue;
text-decoration: none;
-moz-transition: .6s ease-in-out;
-webkit-transition: .6s ease-in-out;
-o-transition: .6s ease-in-out;
-ms-transition: .6s ease-in-out;
transition: .6s ease-in-out;
}

.well {
position: relative;
display: block;
background-color: red;
text-align: left;
overflow: hidden;
padding:15px;
margin-bottom:10px;
border-radius:0;
border-top:none;
border-bottom:none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well">
<div section="sidebar-full">
<div class="summary-sidebar">
Here comes my image
</div>

<div class="tag">
TAG-TAG-TAG
</div>
<div class="title">
TiTLE = TITLE
</div>

<div class="date">
Date ---- date ---- date
</div>
</div>
</div>




Answer

Change well:hover { } to .well:hover {} and your code functions as expected.