Why does the background-color of .a does not change when I hover? .b?
CSS
.a {
color: red;
}
.b {
color: orange;
}
.b:hover .a {
background-color: blue;
}
HTML
<div id="wrap">
<div class="a">AAAA
<div class ="b">BBBB</div>
</div>
</div>
http://jsfiddle.net/2NEgt/323/
Because .a is not descendent or comes after/inside of .b which is condition to work for it
for example if you inverse it, since .b is descendent of .a, it will work
.a:hover .b {
background-color: blue;
}
You are trying to select .a when it's a child of .b in a hover state. This could never happen .a is the parent of .b.
Actually you are trying to change background of parent on child hover this would not possible as it's parent of b if you change b's background color on hover of a then it will work
.a:hover .b {
background-color: blue;
}
it's here
http://jsfiddle.net/u7tYE/
There is an error in your HTML also .a is not descendent
HTML:
<div id="wrap">
<div class="a">AAAA</div>
<div class ="b">BBBB</div>
</div>
CSS:
.a {
color: red;
}
.b {
color: orange;
}
.b:hover, .a:hover {
background-color: blue;
}
Related
how to style a div element that is nested within a section, this is what I tried, but I get the error expecting "}";
#section1
{
color: blue;
#div1 {
color: red;
}
}
If it have the id, you can select the ID directly:
#div1 {
// your style here
}
or ou can use CSS selectors in conjunction with it's IDs:
div#section1 div#div1 {
// your style here
}
if you are using just css, then try like,
#section1
{
color: blue;
}
#section1 #div1
{
color: red;
}
If you do not use less or sass, you should not write nested classes.
the only thing that you can use is that divide your class into 2 classes:
But you also can only use #div 1 instead of #section1 #div1.
#section1 {
color: blue;
}
#section1 #div1 {
color: red;
}
<div id="section1">
ABC
<div id="div1">
XYZ
</div>
</div>
The class of DIV is FIRST. I want to call class SECOND on hover. How can I do this?
I am using following code:
.first{
background:#F00;
}
.second{
background: #0F0;
}
<div class="first"> This is DIV</div>
You don't need to use an additional class, just add the additional style on hover using the pseudo-selector :hover
<style>
.first{
background:#F00;
}
.first:hover{
background: #0F0;
}
</style>
As i am very kind, i have added an example of how to do what you are asking in pure javascript also:
<style>
.first{
background:#F00;
}
.second{
background: #0F0;
}
</style>
<div class="first" onmouseover="change()" onmouseout="changeBack()"> This is DIV</div>
<script>
function change() {
var d = document.getElementsByClassName("first");
d[0].className += " second";
}
function changeBack() {
var d = document.getElementsByClassName("first");
d[0].className = "first";
}
</script>
Your above way is not correct to do what you are looking for.
Check the below to know how to do it.
Live demo
The HTML code:
<div class="first"> This is DIV</div>
The CSS Code:
.first{
background:#F00;
}
.first:hover{
background: #0F0;
cursor: pointer;
}
Explanation
You need to declare :hover to create hover effect. So instead of creating a new class, you need to add :hover i.e a pseudo class to the class where you want the hover to work. This will make the hover effect you are looking for.
Reference:
W3 Hover reference
Hope this helps.
You can style an element (with a certain class) when another one is hovered in a limited number of cases. Main constraint: the hovered element must be placed in HTML code before the styled one.
More about + and ~ the adjacent and general sibling combinators
.first{
background:#F00;
}
.second{
background-color: #0F0;
}
.first:hover ~ .second {
background-color: tomato;
}
.first:hover ~ .hello .second {
background-color: violet;
}
.hello {
background-color: beige;
}
.hello {
padding: 1rem;
}
<div class="first"> This is DIV</div>
<div> Some div</div>
<div class="second"> I've class .second</div>
<div class="hello">
<div class="second"> Child of a (following) sibling of .first</div>
</div>
Hover the first box to see the result
This is how you would do it in javascript.
document.getElementById('idOfElement') is getting element reference.
Adding an event on it. In your case, you need two events which is onmouseover and onmouseleave.
let first = document.getElementById('first'),
sec = document.getElementById('second');
first.onmouseover = () => {
sec.style.background = 'black';
}
first.onmouseleave = () => {
sec.style.background = 'red';
}
#first, #second {
height: 100px;
width: 100px;
background: red;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s linear;
}
<div id="first">first</div>
<div id="second">second</div>
You can also do this on css. However, this is limited. You can't get reference to your parent element and previous sibling elements. That's what I know. (correct me if I am wrong).
#first, #second {
height: 100px;
width: 100px;
background: red;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s linear;
}
#first:hover ~ #second {
background: black;
}
<div id="first">first</div>
<div id="second">second</div>
Hope it helps. Cheers
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;
}
}
So I have two classes: parent and child.
parent class is basically a Square and child class contains the text within the Square. I am trying to change
the background color of parent and text color of child on hover over parent. This is what I have so far,which only changes the parent's background color:
.parent:hover {
background-color: #FFCC00;
}
I tried this as well but it didnt help:
.panel-body:hover .child {
background-color: #FFCC00;
color: #FFFFFF;
}
Edit: Since none of the solutions are working. I am adding the HTML code piece.
<div class="parent">
<span class="arrow1"><i class="left-arrow" role="numerical"></i></span>
<div class="child ng-binding">
Child Text needing color change
</div>
<div class="child-2 ng-scope">
No change needed for this text
</div>
</div>
I believe you want a combination of both of your attempts like so:
.parent:hover {
background-color: #FFCC00;
}
.parent:hover .child {
color: #FFFFFF;
}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js">
</script>
<div class="parent">
<span class="arrow1"><i class="left-arrow" role="numerical"></i></span>
<div class="child ng-binding">
Child Text needing color change
</div>
<div class="child-2 ng-scope">
No change needed for this text
</div>
</div>
Why don't you just like this:
.parent:hover {
background-color: #FFCC00;
}
.parent:hover .child{
background-color: #FFCC00;
color: #FFFFFF;
}
You could use:
.parent:hover .child {
color: #FFFFFF;
}
.parent:hover {
background-color: #FFCC00;
}
This one will work fine as you need to do is to use two blocks.
.parent:hover
{
background-color: #FFCC00;
}
.parent:hover > .child
{
background-color: #FFCC00;
color: #FFFFFF;
}
try this css along with yours this will change the color of child elements while hovering parent div
.parent:hover .child
{
color:#fff;
}
.parent:hover .child-2
{
color:red;
}
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/