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
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;
}
So I'm new to using Less files to improve my CSS, I currently have a panel.less file which contains all the CSS for creating panels on my page.
I'm looking to somehow make it so that whenever the text-danger class is applied to the panel div, it changes the font-color to white rather than red.
.panel-variant(#border; #heading-text-color; #heading-bg-color; #heading-border)
{
border-color: #border;
& > .panel-heading {
color: #heading-text-color;
background-color: #heading-bg-color;
border-color: #heading-border;
+ .panel-collapse > .panel-body {
border-top-color: #border;
}
.badge {
color: #heading-bg-color;
background-color: #heading-text-color;
}
}
& > .panel-body {
color: #gray-dark;
+ .text-danger {
color: #heading-text-color;
}
}
& > .panel-footer {
+ .panel-collapse > .panel-body {
border-bottom-color: #border;
}
}
}
Above is the code I use in the Less file, What am I doing wrong?
The HTML would look like this though if that helps:
<div class="panel panel-body text-danger"> ERROR! </div>
Based on the HTML given in the comments, all the three classes are applied to the same element and not to different siblings or child elements. Hence your Less code should be modified as below:
Modified Less: (I've ommitted the other parts to keep it simple)
&.panel-body {
color: #777;
&.text-danger {
color: #heading-text-color;
}
}
/* mixin call */
.panel{
.panel-variant(1px; #fff; #0f0; #00f);
}
Compiled CSS Output:
.panel.panel-body.text-danger {
color: #ffffff;
}
Your original Less code had descendant selector (for .panel-body) and adjacent sibling selector (+) for the .text-danger and would work only when the markup is as follows:
The adjacent sibling selector (+) works only when the markup is like this:
<div class='panel'>
<div class='panel-heading'>Heading</div>
<div class='panel-body'>Body</div>
<div class='text-danger'>Some alert text</div>
</div>
I have a block (div) and which contain text with links.
When I hover over this block I need to change text color (also links color).
"div:hover" - with this text color is changed, but link color remain unchanged.
Full code:
CSS:
a {
color: #336699;
}
div {
height: 50px;
background-color: #FFF;
color: red;
}
div a {
color: red;
}
div:hover {
background-color: #336699;
color: #FFF;
}
HTML:
<div>
text test URL text
</div>
You need to target the link explicitly to override its color.
Like this:
div:hover a {
color: #FFF;
}
FIDDLE
Explanation:
You originally set the the color of the link to red with:
div a {
color: red;
}
When you then add the div:hover{} class - although it is a more specific rule than div a - it does not target the link itself - only the container of the link.
So if there was no rule which set the link color - then the div:hover{} class would kick in and color the link white on hover - via inheritance.
However since there is a rule which colors your links red - you need to target the links themselves on hover via the selector div:hover a
Try this:
div:hover, div:hover a{
background-color: #336699;
color: #FFF;
}
fiddle
You almost got it right. If you need the link to change on hovering the div, you have to do this:
div:hover a {
color: red;
}
fiddle here: http://jsbin.com/bipoq/1/
try this
<style>
a{
color: #336699;
}
div{
height: 50px;
background-color: #FFF;
color: red;
}
div a{
color: red;
}
div:hover{
background-color: #336699;
color: #FFF;
}
div:hover a
{
color: #FFF;
}
</style>
<div>
text test URL text
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/