I have three divs when hovered changes the text right below them (This is Text A, This is Text B, This is Text C). The default active text is Text B.
I want to the color of div.b to change when I hover over div.c
I have this working for the hover over div.a:hover
Fiddle
HTML
<div class="onHoverText">
<div class="a">Text A</div>
<div class="b">Text B</div>
<div class="c">Text C</div>
<div class="outputBox">
<span>This is Text B</span></div>
</div>
CSS
.onHoverText {
cursor: pointer;
}
.a, .b, .c {
display: inline-block;
margin-right: 3%;
font-size: 15px;
}
.b {
color: #FF0004;
border-right: thin dashed #3A3A3A;
border-left: thin dashed #3A3A3A;
padding: 0 2%;
}
.a:hover, .c:hover {
color: #FF0004;
}
.outputBox {
font-size: 36px;
}
div.a:hover ~ div.outputBox span, div.c:hover ~ div.outputBox span {
display: none;
}
div.a:hover ~ div.outputBox:after {
content:' This is Text A';
}
div.c:hover ~ div.outputBox:after {
content:' This is Text C';
}
div.a:hover ~ div.b:not(.active), div.c:hover ~ div.b:not(.active) {
color: #000;
}
I think the reason this isn't working is because the adjacent selector in CSS will only target elements after the target element:
The general sibling combinator selector is very similar to the adjacent sibling combinator selector we just looked at. The difference is that that the element being selected doesn't need immediately succeed the first element, but can appear anywhere after it.
Source CSS Tricks
Here I am doing little trick to get closer to your requirement. I have added the following two new styles. Check the fiddle.
.onHoverText:hover .b{color:#000;}
.b:hover{color:#FF0004 !important}
DEMO
There is no previous sibling selector in CSS.
You should use javascript as a workaround if you do not have the choice (here with jQuery) :
$('.a, .c').hover(function(){
$('.b').toggleClass('disabled');
});
With a simple css class :
.b.disabled {
color: #000;
}
jsFiddle Demo
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>
So I have:
.element {
border: 1px solid red;
display: block;
}
but I'd like this rule to be ignored when .element is a child of .no-border using the :not pseudo-selector. Example:
<div class="element">I have a border</div>
<div class="no-border">
<div class="element">I don't have a border</div>
</div>
I am attempting to do this using the following:
:not(.no-border) .element {
border: 1px solid red;
display: block;
}
However, the border is still applying to .element if it is a child of .no-border.
https://jsfiddle.net/7Lox10pL/1/
Any help?
You should use direct descendent selector >:
:not(.no-border)>.element
JSFiddle
You could create a separate selector whenever it is a child of .no-border and override the styles with initial, e.g.,:
.no-border .element {
border: initial;
display: initial;
}
See the fiddle at JSFiddle.
Try this..
.outerclass {
h3 {
color: blue;
}
:not(.nested) (div > div)
{
color: green;
}
}
I need some 'derivative' css which is a child of my parent css. I want to import all of attributes of 'parent' css to my 'child' css.
I can't find a solution.
E.g.
.red {
color: red;
}
.more_red {
color: red;
border: 2 px solid red;
}
Is it possible to do something familar my pseudocode?
.red{
color: red;
}
.more_red <SOME TEXT WHICH SAYS 'THIS CSS IS A CHILD OF .red'>{
border: 2px solid red;
}
HTML
<p class='more_red'>texty text</p> <- this only I Need
<p class='red more_red'>texty text</p> <- not this
EDIT I need to create a css which consists of all of 'parent' css properties.
Only way to inherit/importing the styles defined in one rule to another in CSS is cascading. You cannot use extend as in LESS in CSS.
For inheriting the properties from other element, the parent-child hierarchy is necessary.
You can use direct child selector >
.red {
color: red;
}
.red > .more_red {
border: 2px solid red;
}
or descendant selector
.red .more_red {
border: 2px solid red;
}
By doing this, the styles of parent are inherited by children.
You can also use global selector *.
Ex. For setting the font-family across the site
* {
font-family: Helvetica;
}
You can also use element/type selector.
Ex. To set the style of all the anchors
a {
text-decoration: none;
color: #ccc;
}
a:hover {
text-decoration: underline;
}
HTML CODE
<div class="box">
<p class="turn">shou</p>
</div>
CSS CODE
.turn {
font-size: 50px;
text-align:center;
padding:150px;
color: white;
}
.box {
height:500px;
width:500px;
background-color: blue
}
.box:hover ~ .turn {
color: red;
}
jsfiddle
So, using my logic, after hovering on the div "box" text is supposed to turn red.
I'm quite unsure why it doesn't happen.
You are using sibling selector ~ but .turn is a child of .box element. So you need to use child selector i.e. >.
.box:hover > .turn {
color: red;
}
JsFiddle Demo
~ is the general sibling combinator. .turn is not a sibling of .box, so the style doesn't get applied.
You could use .box:hover .turn
You are using the wrong selector:
This will work!
.box:hover > .turn {
color: red;
}
try this...
.box:hover .turn{
color:red;
}
~ CSS selector is called the Sibling Selector.
If your markup (HTML) were like this:
<div class="box">
</div>
<p class="turn">shou</p>
then your CSS would work perfectly because in the DOM tree, the <p> node is a sibling of the <div> node.
DOM Tree for above HTML:
<document-root>
|
|
_______|_______
| |
<div> <p>
But in your markup, the <p> element is actually a child node of the <div>. And the DOM tree would be:
<document-root>
|
|
<div>
|
|
<p>
So you should use a child selector > since the <p> is a direct child or you could simple leave a space between .box and .turn (this is the descendant selector).
So your final CSS should be:
.turn {
font-size: 50px;
text-align:center;
padding:150px;
color: white;
}
.box {
height:500px;
width:500px;
background-color: blue
}
.box:hover .turn {
color: red;
}
Updated fiddle: http://jsfiddle.net/sH3Dh/7/
.box .turn:hover{
color: red;
}
Also u can use:
.box p.turn:hover{
color: red;
}
if you can use padding on .box so use this
.box:hover >p.turn{
color: red;
}
No...because ~ is a sibling selector whereas, in your example, the .turn element is a child of .box
http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/
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.