Objective
I want the background color of my <p> (with the class of thumb-caption) to change when I hover over the parent container.
Background
I have this demo on codepen that has a hover state on the parent and on the <p> but the <p> only changes color when you hover in it directly.
HTML
<div class="system-thumb">
<a href="https://www.google.com/search?btnG=1&pws=0&q=why+is+juan+so+awesome&gws_rd=ssl" target="_blank">
<p><img src="http://placehold.it/360x180"><p>
<h2>Product</h2>
<p class="thumb-caption">You should totally buy this product, yay!</p>
</a>
</div>
CSS
.system-thumb {
margin: 0 auto;
max-width: 360px;
}
.system-thumb:hover {
outline: 1px dotted #00aba7;
}
.system-thumb .thumb-caption {
margin: 0;
padding: 10px 5px;
}
.system-thumb .thumb-caption:hover {
background-color: #00aba7;
color: #fff;
}
.system-thumb p img {
max-width: 100%;
}
Simple, apply the :hover psuedo-class to the parent element:
.system-thumb:hover p {
background-color: #00aba7;
}
Before:
.system-thumb .thumb-caption:hover {
background-color: #00aba7;
color: #fff;
}
After:
.system-thumb:hover .thumb-caption {
background-color: #00aba7;
color: #fff;
}
You need to assign who's going to have the event. In this case, <p> will be affected only if its parent is hovered. So, you need to move the :hover element to the parent selector.
Select the child (.thumb-caption) when it's hovered (.system-thumb:hover)
.system-thumb:hover .thumb-caption {
/* Your css codes*/
}
That's simple.
Related
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 the following code that sets a class of dragging-something to the html element on a page on a trigger. The class does the following:
html.dragging-something {
cursor: -moz-grabbing !important;
cursor: -webkit-grabbing !important;
cursor: grabbing !important;
}
That all works, until I move my mouse over another element that changes the cursor. (Like an input field)
How do I make it so my dragging-something class does not get overridden by anything else that might change the cursor?
jsFiddle (Problem): https://jsfiddle.net/BoxMan0617/jndukr86/
jsFiddle (Solution): https://jsfiddle.net/BoxMan0617/jxesdzqf/ (Thanks to #humble.rumble)
[Solved]
You need to apply it to the elements contained within the HTML tag not just the HTML tag
html.dragging-something * {
cursor: -moz-grabbing !important;
cursor: -webkit-grabbing !important;
cursor: grabbing !important;
}
I personally try to avoid using !important as often as I can. Instead I give structuring and specificity of rules a shot: http://jsfiddle.net/vy599pa2/
<div class="move">
<div class="pointer">
</div>
</div>
<div class="pointer">
div {
width: 150px;
height: 150px;
padding: 30px;
background-color: grey;
border: 2px solid black;
}
div div {
padding: 0;
background-color: lightblue;
}
div + div {
margin-top: 10px;
}
.pointer,
.pointer * {
cursor: pointer;
}
.move,
.move * {
cursor: move;
}
I wonder know how to change a DIV from another DIV in the CSS
I mean : I have 2 div, and when the mouse is over 1 div, I want change the CSS of the other DIV
Thanks you
HMTL :
<li id="aboutUs">
<a>
<div id="icon"></div><h1>ABOUT US</h1>
<p id="nav">
A bit about us, jackpots, good gaming & join the community
</p>
</a>
</li>
CSS :
#aboutUs{
float:left;
border-right: 1px solid rgb(231, 231, 231);
border-bottom: 3px solid rgb(231, 231, 231); /* gray color */
height: 78px;
padding-top: 20px;
margin-right: 10px;
margin-bottom:10px;
vertical-align: top;
min-height: 62px;
padding-left: 10px;
padding-right: 10px;
color:#808080; /* #808080; */
cursor: pointer;
}
#aboutUs:hover{
border-bottom: 3px solid rgb(86, 126, 1); /* green color */
}
li a{
color:#808080; /* Color 2 */
}
li a:hover{
color: #000000; /* Color 1 */
}
I WANT TO BLEND THE "ABOUT US" and the "li a" for some COLLSION DETECTION's REASON with the mouse. I want that when the mouse is hover the "about us, the "li a hover's css execute"
If the two elements are siblings you can use the adjacent sibling combinator, e.g.
<div></div>
<div></div>
div {
background: slategray;
height: 5em;
width: 5em;
}
div + div {
background: lightgray;
}
div:hover + div {
background: peru;
border-radius: 10px 50px / 20px;
}
http://jsfiddle.net/b5fgT/1/
Or if the elements are siblings but not immediate siblings, you can use the general sibling combinator:
http://jsfiddle.net/b5fgT/3/
You can also style a descendant element when mousing over its parent:
div:hover > div {
/* CSS */
}
Edit as per your comment: "But I want change the color of the <p> only.. Can you do it for me?"
Well in that case you can use: #aboutUs:hover p {color: red;} - http://jsfiddle.net/mpa5k/1
Well, that is a bit tricky. Css does not currently travel UP the Dom, only DOWN the Dom. If you are traveling down, you can simply use the + for adjacent siblings, or ~ for general siblings selector.
Or, you could give them the same class name and use the :not:hover pseudo class. Check out this fiddle here:
http://jsfiddle.net/LGQMJ/
div:not(:hover) span.question {
opacity: 0;
}
div:hover span.question {
opacity: 1;
}
If I could see your HTML structure I could help you more.
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/