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>
Related
So guys I want to set a color of H2 inside of a divID:hover in css.
Is there a way to do this?
Btw I don't want to use Javascript for this.
#moto:hover {
cursor: pointer;
border-color: green;
color: green;
}
This will apply to an h2 element any where inside the div on hover.
#divId:hover h2 {
style
}
Using the child combinator will apply only to direct children.
#divId:hover > h2 {
style
}
I have added some colors, you can manage as you need.
#moto {
border-color: blue;
color: black;
height:30px;
background-color:gray;
}
#moto:hover {
cursor: pointer;
border-color: green;
color: green;
height:30px;
background-color:red;
}
<h2 id="moto">heading</h2>
The selector should be
#moto:hover h2 { ... }
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'm trying to change the color of a link on hover of a <div>. Is that possible using just CSS? If not, how would I achieve this?
div {
border: 1px solid black;
padding: 15px;
}
div:hover {
color: red;
}
<div>
<a href='www.google.com'> www.google.com </a>
</div>
You need to style the anchor, not the div. Try this:
div {
border: 1px solid black;
padding: 15px;
}
div:hover a {
color: red;
}
<div>
<a href='www.google.com'> www.google.com </a>
</div>
The div itself has no text, so there's no place to apply the color property. So when you hover a div with nothing to color, nothing happens.
As mentioned in another answer, apply the hover to the anchor element, which contains text.
But your original code would work if instead of color you used background-color or border.
div {
border: 1px solid black;
padding: 15px;
}
div:hover {
color: red; /* won't work; nothing to color */
background-color: aqua; /* this will work */
border: 2px dashed #777; /* this will work */
}
<div>
<a href = 'www.google.com'> www.google.com </a>
</div>
rjdown's answer is correct, but the question is if you still need the div at all.
All a div does is provide a block for you to style. If you style the anchor as block, you have just that. Code bloat is bad for your SEO and headache-freeness. ;-)
Try this:
a:link {
display: block;
/* make it act as the div would */
overflow: auto;
/* or what you want, but good practice to have it */
border: solid 1px black;
}
a:hover,
a:focus,
a:active {
border: solid 1px red;
}
<a href='www.google.com'> www.google.com </a>
Remember to use more than a color change on your hover or the 1 in 12 males with color blindness won't see a thing, potentially, happening. The focus and active additions are for accessibility too. Especially focus is very important for keyboard users.
Good luck.
We can simply assign inherit value to all the CSS properties of anchor tag ,
Thus when you hover above its container DIV element , it will inherit all the new properties defined inside DIV:hover.
div {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
height: 100px;
width: 100%;
color: white;
background: blue;
}
a {
text-decoration: inherit;
color: inherit;
}
div:hover {
color: orange;
}
<div>
www.google.com
</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/