Short question: Why does the background-color of .b does not change when I hover? .a?
CSS
.a {
color: red;
}
.b {
color: orange;
}
.a:hover .b {
background-color: blue;
}
HTML
<div id="wrap">
<div class="a">AAAA</div>
<div class ="b">BBBB</div>
</div>
http://jsfiddle.net/2NEgt/
You need to have .a:hover + .b instead of .a:hover .b
.a:hover .b would work for a structure like
<div class="a">AAAA
<div class ="b">BBBB</div>
</div>
If at some point you'll need to have some elements between .a and .b, then you'll need to use .a:hover ~ .b, which works for all siblings of .a coming after it, not just the next one.
Demo http://jsfiddle.net/thebabydino/EajKf/
Can you not do something like a:hover + b? see http://meyerweb.com/eric/articles/webrev/200007a.html
You can use + selector
.a:hover + .b {
background-color: blue;
}
to apply the css for sibling element, or
.a:hover > .b {
background-color: blue;
}
for nested class.
because .b isn't a child of .a, so that selector isn't finding anything. Use javascript to do what you want to do there.
There are two things you can do.
Either change your HTML to make .b a child of .a
<div id="wrap">
<div class="a">AAAA
<div class ="b">BBBB</div>
</div>
</div>
OR
Change your css to use the adjacent selector
.a:hover + .b {
background-color: blue;
}
no js needed http://jsfiddle.net/2NEgt/3/
You shouldn't change a sibling's style when an event occurs on a different element. It's out of the context of CSS.
Use JavaScript to achieve this, for example:
var wrap = document.getElementById("wrap");
var aDiv = wrap.getElementsByClassName("a")[0];
var bDiv = wrap.getElementsByClassName("b")[0];
aDiv.onmouseover = function() {
bDiv.style.backgroundColor = "red";
};
aDiv.onmouseout = function() {
bDiv.style.backgroundColor = "white";
};
try to understanding this example:
html code
<p>Hover over 1 and 3 gets styled.</p>
<div id="one" class="box">1</div>
<div id="two" class="box">2</div>
<div id="three" class="box">3</div>
<!--css-->
#one:hover ~ #three{
background-color: black;
color: white;
}
.box {
cursor: pointer;
display: inline-block;
height: 30px;
line-height: 30px;
margin: 5px;
outline: 1px solid black;
text-align: center;
width: 30px;
}
when you hover on the box 1 than the box 3 will get black color
Jquery is a good and easy solution:
html:
<div class="a">AAA</div>
<div class="b">BBB</div>
script:
Put this script into your html if you want. That's all.
<script>
$(".a").mouseover(function(){
$(".b").css("color", "blue");
});
$(".a").mouseleave(function(){
$(".b").css("color", "red");
});
</script>
Related
I understand that I can change another element's style when hovering on a different element like this:
.element-one:hover .element-two {
opacity: 0.8;
}
But how can I change the style of all the elements in the page except element-two when I hover on element-one?
You can use .element-one:hover :not(.element-two).
Here is an example:
.element-one:hover :not(.element-two) {
opacity: 0.8;
}
.element-one {
background: black;
margin: 10px;
}
.element-one div {
background: green;
border: 1px solid blue;
margin: 10px;
padding: 10px;
}
<div class="element-one">
<div class="element-two">
element-two
</div>
<div class="element-three">
element-three
</div>
<div class="element-four">
element-four
</div>
</div>
However - note that it will work only for elements inside element-one and not for all the elements in the page.
You can do this with body for example, but the problem there is that .element-two is probably also inside some other element that exists inside body, and in such case the .element-two will get the opacity from it's containing element.
I m having problem with css of a tooltip. Tooltip belongs to an input field and if an other checkbox is checked, this tooltip needs to be placed correctly on the input field. so the check box is :
<input type="checkbox" id="telefonBox" />
and the input field which tooltip needs to be placed :
<input type="text" class="form-control tooltip-berater" id="agentName"/>
What i tried is
input[id=telefonBox]:checked + .tooltip-berater + .tooltip > .tooltip-inner {top: 875px !important; left: 30px; max-width:300px;}
(Basically i m trying to write: if a checkbox with this id checked, then do some stuff in this css classes)
But doesnt function at all. What am i missing?
If both inputs are children of the same div, but not directly next to each other (in the HTML markup) then you need to use ~ operator instead of +.
+ works like:
<div class="parent">
<div class="first"></div>
<div class="second></div>
</div
.first + .second {
// do stuff with second
}
~ works like:
<div class="parent">
<div class="first"></div>
<div class="inbetween"></div>
<div class="second"></div>
</div
.first ~ .second {
// you can still do stuff with second
}
There is no selector which would help you in other cases possible in your HTML markup, especially:
When .second div is placed earlier than .first
When .second div has different parent from .first
In those cases you will need to use JavaScript to select and change your element's CSS.
Heres a fiddle i made that changes colour of input box: https://jsfiddle.net/8we5u1vs/
Is that the kind of thing you want? Obviously its much simpler than what you're talking about. You havnt added much code so hard to tell, could you show code or fiddle for an example of the tooltip?
input[id=telefonBox]:checked + .tooltip-berater {
background-color:red;
}
You can try this way, but text input is still available via tab key.
div {
display: inline-block;
position: relative;
line-height: 1.25em;
border: 1px solid;
background: white;
}
input[type=text] {
border: 1px solid white;
line-height: inherit;
}
span {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
text-align: center;
display: none;
border: 1px solid white;
background: white;
}
input[type=checkbox]:checked + div span {
display: block;
}
<input type=checkbox>
<div>
<input type=text>
<span>N/A</span>
</div>
How can I select the first element with class "red" (First) in this construction?
HTML:
<div class='container'>
<p>Zero</p>
<p class="red">First</p>
<p class="red">Second</p>
</div>
http://jsfiddle.net/ek9Ch/
try this..
.container .red:nth-child(2)
{
color: red;
}
Ok, not very pretty but does the job:
.container p + p.red {
color: red;
}
.container p + p.red ~ p {
color:black; /*reverting back*/
}
fiddle: http://jsfiddle.net/Varinder/ek9Ch/2/
.container p[class=red]:nth-child(2)
{
color: red;
}
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 9 years ago.
If I have markup like this:
<div>
<div class="one"></div>
</div>
<div class="two">
Is there any way in css that I can select class .two from class .one?
As in this fiddle.
What you are trying is not possible using only CSS, what you can do is you can re arrange the element like this
<div>
<div class="one"></div>
<div class="two">
</div>
And use
.one:hover + .two {
/* Styles */
}
Else you can do is this (If you don't want to change the markup) Demo
div {
width: 50px;
height: 50px;
background: pink;
}
.two {
height: 20px;
background: #000;
width: 20px;
}
div:nth-of-type(1):hover + .two {
background: #f00;
}
.one + .two {
background: #f00;
}
you can do using jquery
script type="text/javascript">
$(function () {
$(".one").mouseover(function () {
$(".two").css("background","red")
});
$(".one").mouseout(function () {
$(".two").css("background", "");
});
});
</script>
Consider the following HTML:
<div class="a">
<div class="b">Hello</div>
</div>
<div class="c">
<div class="b">World</div>
</div>
Adding the following CSS colors only "World" in red, as expected:
.c .b {
color: red;
}
But, adding the following CSS instead colors both "Hello" and "World" in red:
:not(.a) .b {
color: red;
}
Why?
You need to give it like this:-
Demo
div:not(.a) .b {
color: red;
}
Pseudo-class :not
Syntax is selector:not(){ properties }
Since the :not pseudo-class represents an element that is not represented by its argument,
you have to specify the element you want to exclude before the :not selector
Per your example, try this instead:
div:not(.a) .b {
color: red;
}