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.
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 different css classes based on different actions. Everything is working good, but when I apply activeBackground class based on condition its making div background-color to green but border-left-color is not coming green its still using .arrow-div class. How can I resolve this issue and apply .activebackground class when needed?
HTML
<div class="text-arrow" ng-class="{'activeBackground': applyActiveFile, 'completeBackground':applyComplete}">File Selection
<span class="arrow-div"></span>
</div>
CSS
.text-arrow {
background-color:#BABABA;
color:#fff;
display:inline-block;
padding-left:45px;
}
.arrow-div {
border-style: dashed;
border-color: transparent;
border-width: 0.15em;
display: -moz-inline-box;
display: inline-block; /* Use font-size to control the size of the arrow. */
font-size: 100px;
height: 0;
line-height: 0;
position: relative;
vertical-align: middle;
width: 0;
background-color:#fff; /* change background color acc to bg color */
border-left-width: 0.2em;
border-left-style: solid;
border-left-color: #BABABA;
left:0.25em;
}
.activeBackground{
background-color: green;
border-left-color: green !important;
}
It appears to me that you're applying .arrow-div and .activeBackground to different elements, and the way your code is written, .activeBackground can't override .arrow-div because it's being applied to a different element (the parent). To affect the child element (the span containing the arrow) you need to set up a css rule that directly targets any child .arrow-div of .activeBackground.
My solution was to simply modify your css like so, providing a way to change the arrow div:
.activeBackground{
background-color: green;
}
.activeBackground .arrow-div{
border-left-color: green;
}
Here's a fiddle of it in action:
https://jsfiddle.net/cupno5g9/
I have following CSS:
.bckgrnd_150 {
background: rgba(0, 0, 0, 0.5);
width: 150px;
height: 100px;
transition-duration: 2s;
}
.bckgrnd_150:hover {
background: rgba(255, 255, 255, 0.98);
}
.bckgrnd_150 .wp {
color: white;
}
.bckgrnd_150 .wp:hover {
color: black;
}
Since I'm a begginer in this class, I need help. I would like to use whole code (upper) and apply it to one or simplier: When I hover over .bckgrnd_150 class (styled box as background) it will apply for everything inside the div.
There's HTML:
<div class="bckgrnd_150">
<img alt="" src="http://files.tado-hamann.webnode.com/200001010-bd155be2cb/appbar.download.png" style="border-width: 0px; border-style: solid; margin: 0px; width: 25px; height: 25px;">
<p class="wp">blahblah</p>
</div>
So as you can see (http://jsfiddle.net/5d4yyp9p/) hovering over a box works, but don't affect the .bckgrnd_150 .wp class (text).
I would like to help; when I hover over a box, it will also affect text :hover (because I now need to hover over text to affect him).
I'm really sorry, I'm NEW. :)
You could just use:
.bckgrnd_150:hover .wp {
color: black;
}
Instead of
.bckgrnd_150 .wp:hover {
color: black;
}
As by hovering the parent, it will apply on the child elements also.
jsFiddle here.
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.