So I have two classes: parent and child.
parent class is basically a Square and child class contains the text within the Square. I am trying to change
the background color of parent and text color of child on hover over parent. This is what I have so far,which only changes the parent's background color:
.parent:hover {
background-color: #FFCC00;
}
I tried this as well but it didnt help:
.panel-body:hover .child {
background-color: #FFCC00;
color: #FFFFFF;
}
Edit: Since none of the solutions are working. I am adding the HTML code piece.
<div class="parent">
<span class="arrow1"><i class="left-arrow" role="numerical"></i></span>
<div class="child ng-binding">
Child Text needing color change
</div>
<div class="child-2 ng-scope">
No change needed for this text
</div>
</div>
I believe you want a combination of both of your attempts like so:
.parent:hover {
background-color: #FFCC00;
}
.parent:hover .child {
color: #FFFFFF;
}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js">
</script>
<div class="parent">
<span class="arrow1"><i class="left-arrow" role="numerical"></i></span>
<div class="child ng-binding">
Child Text needing color change
</div>
<div class="child-2 ng-scope">
No change needed for this text
</div>
</div>
Why don't you just like this:
.parent:hover {
background-color: #FFCC00;
}
.parent:hover .child{
background-color: #FFCC00;
color: #FFFFFF;
}
You could use:
.parent:hover .child {
color: #FFFFFF;
}
.parent:hover {
background-color: #FFCC00;
}
This one will work fine as you need to do is to use two blocks.
.parent:hover
{
background-color: #FFCC00;
}
.parent:hover > .child
{
background-color: #FFCC00;
color: #FFFFFF;
}
try this css along with yours this will change the color of child elements while hovering parent div
.parent:hover .child
{
color:#fff;
}
.parent:hover .child-2
{
color:red;
}
Related
If I have the following HTML with a custom CSS class:
.custom_list_item {
color: black;
}
.custom_list_item:hover {
color: red;
}
<div class="custom_list_item">Test</div>
This makes it so when I hover over the entire box, it makes the text red. Is there a way to make sure this only happens when I hover over just the text itself?
Wrap it in a span. A p would stretch over the full width of div.
.custom_list_item {
color: black;
}
.custom_list_item span:hover{
color: red;
}
<div class="custom_list_item"><span>Test</span></div>
Wrap it in span then style span:
.custom_list_item {
color: black;
}
.custom_list_item span:hover {
color: red;
}
<div class="custom_list_item">
<span>Test</span>
</div>
Change that div's display property from block to inline-block. No extra elements like spans necessary.
.custom_list_item {
color: black;
display:inline-block;
}
.custom_list_item:hover {
color: red;
}
<div class="custom_list_item">Test</div>
Divs are block level elements by default and will take up the full width of their parent element.
You can wrap a span for your div and set span:hover
.custom_list_item {
color: black;
}
span:hover{
color: red;
}
div{
border: 3px solid red;
}
<div class="custom_list_item"><span>Test</span></div>
I have div that has a hover effect attached to it. This div contains 2 other divs with text, with styled text color.
<div class="item">
<div class="top">
test
</div>
<div class="bottom red">
test red
</div>
</div>
and css:
.item {
width: 480px;
height: 970px;
background: #cccccc;
font-size: 60px;
color:#0073b5;
text-align: center;
}
.red {
color:#ff2400;
}
.item:hover {
background: blue;
color: #ffffff;
}
.top {
height: 466px;
}
.bottom {
padding-top: 85px;
text-align: center;
}
When I hover over any part of the item div, I need all the texts in nested divs to change the color to white.
Currently only text in top changes its color, however text in bottom red doesn't.
I've tried different combinations but the best I've got is to change bottom red color to white only when mouse over that div and not when mouseover over other parts of item.
Please help!
.red will explicitly override the color. Make your selector stronger, eg:
.item:hover > * {
color: #ffffff;
}
// Other examples
.item:hover > div
.item:hover *
// Or explicitly declare .red too
.item:hover,
.item:hover .red
// As worst solution, you have !important
.item:hover {
background: blue;
color: #ffffff !important;
}
In CSS the most specific rule wins. Try adding the following rule to your CSS.
.item:hover .red {
color: white;
}
I want to change background color of a div when hovering on another one. The first div is going to be black, but not change when hover over. When hovering over the second div, the background on that is going to turn black, and the first div is going to turn white. I have done this before, but it seems like it doesn't work anymore.
CSS
.svart {
background-color: black;
}
.hvit {
background-color: white;
}
.hvit:hover {
background-color: black;
}
HTML
<div id="bestill_forside" class="svart">
One
</div>
<div id="lear_forside" class="hvit">
Two
</div>
I have tried the following:
.hvit:hover .svart {
background-color: white;
}
.hvit:hover + .svart {
background-color: white;
}
.hvit:hover > .svart {
background-color: white;
}
.svart must be below .hvit in the document, you cannot select previous elements in CSS:
<div id="lear_forside" class="hvit">
Two
</div>
<div id="bestill_forside" class="svart">
One
</div>
What your CSS selectors were doing was:
.hvit:hover .svart {
background-color: white; */This Selected .svart inside of .hvit*/
}
.hvit:hover + .svart {
background-color: white; */This Selected .svart that was a immediate sibling of .hvit*/
}
.hvit:hover > .svart {
background-color: white; */This Selected .svart that was a direct child of .hvit*/
}
Read more about CSS selectors:
http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors
Why does the background-color of .a does not change when I hover? .b?
CSS
.a {
color: red;
}
.b {
color: orange;
}
.b:hover .a {
background-color: blue;
}
HTML
<div id="wrap">
<div class="a">AAAA
<div class ="b">BBBB</div>
</div>
</div>
http://jsfiddle.net/2NEgt/323/
Because .a is not descendent or comes after/inside of .b which is condition to work for it
for example if you inverse it, since .b is descendent of .a, it will work
.a:hover .b {
background-color: blue;
}
You are trying to select .a when it's a child of .b in a hover state. This could never happen .a is the parent of .b.
Actually you are trying to change background of parent on child hover this would not possible as it's parent of b if you change b's background color on hover of a then it will work
.a:hover .b {
background-color: blue;
}
it's here
http://jsfiddle.net/u7tYE/
There is an error in your HTML also .a is not descendent
HTML:
<div id="wrap">
<div class="a">AAAA</div>
<div class ="b">BBBB</div>
</div>
CSS:
.a {
color: red;
}
.b {
color: orange;
}
.b:hover, .a:hover {
background-color: blue;
}
I have a question and I am not sure if it is possible, but I thought I would try asking.
Say I had three div's:
<div id="parent_div">
<div id="child_div_1">Blue</div>
<div id="child_div_2">Red</div>
</div>
If all text inside parent_div is set to black, how would I make the child_div_1 and child_div_2 change font-color to blue and red respectively, when the parent div is hovered over?
Sorry if this is a bit confusing, but is there a way to do this preferably with CSS only?
#parent_div:hover #child_div_1 {
color: blue;
}
#parent_div:hover #child_div_2 {
color: red;
}
Just target the relevant child elements based upon the :hover state of the parent:
/* defaults */
#parent_div div {
color: #000; /* or whatever... */
}
/* hover rules */
#parent_div:hover #child_div_1 {
color: blue;
}
#parent_div:hover #child_div_2 {
color: red;
}
JS Fiddle demo.
Use the :hover pseudo-class on the parent element:
#parent_div { color: black; }
#parent_div:hover #child_div_1 { color: blue; }
#parent_div:hover #child_div_2 { color: red; }
Demo: http://jsfiddle.net/Guffa/M3WsW/