I want to change another element property on hover of a element. So far I've I came up with the following CSS:
#test3:hover #test4
{
background-color: red;
}
<div id="test3">three</div>
<div id="test4">four</div>
However, this is not working. Is this possible at all? What would you suggest?
#test3:hover #test4
This means, target an element test4 that is a child of test3. You want the + sibling selector instead:
#test3:hover + #test4
{
background-color: red;
}
Browser compatibility table
Related
I want to change the style of another element when a contenteditable div has focus as shown below:
[contenteditable="true"]:focus .testClass {
background-color: black;
}
<div contenteditable="true">Hello World</div>
<button class="testClass">Test</button>
Unfortunately the above isn't working, I have tried the following CSS also:
[contenteditable="true"]:focus + .testClass {
[contenteditable="true"]:focus > .testClass {
[contenteditable="true"]:focus, .testClass {
Using [contenteditable="true"]:focus on its own works fine to style the editable div when focus is applied, but none of these work to style another element at the same time. Is this possible to do?
You need to use ~. It's the general sibling selector which separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent. Check this:
[contenteditable="true"]:focus ~ .testClass {
background: red;
}
[contenteditable="true"]:focus ~ .testClass {
background: red;
}
<div contenteditable="true">Hello World</div>
<button class="testClass">Test</button>
More about the general sibling selector can be read over here.
Is this what you want:
[contenteditable="true"]:focus {
background-color: black;
}
<div contenteditable="true">Hello World</div>
<button class="testClass">Test</button>
Or this (you mentioned you've tried it, but it does work):
[contenteditable="true"]:focus + .testClass {
background-color: black;
}
<div contenteditable="true">Hello World</div>
<button class="testClass">Test</button>
Here some reading on CSS selectors:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors
[contenteditable="true"]:focus ~ .testClass will do the job as Fahad Hasan said
The ~ symbol means the first element right after ( not child )
you can change the style of .textClass when your div has focus, by using jquery:
$("div[contenteditable=true]").focusin(function () {
$(".testClass").css({
"background-color": "black",
});
});
i have 2 div elements in html :
<body>
<div id="one"></div>
<div></div>
</body>
I want to hide div elements after div with id="one" from CSS, I tried this :
#one:after{display:none}
This doesn't work any other way to do?
No, :after pseudo doesn't do that, you need to use
#one + div {
display: none;
}
Demo
And if you want to hide ALL div followed by #one you will have to use
#one ~ div {
display: none;
}
Demo 2
:after applies to generated content. You want the adjacent sibling combinator:
#one + * {
}
If you know the exact position of the child element (like in you case its 2nd child), you can use nth-child pseudo class
div:nth-child(2)
{
display:none;
}
Fiddle:http://jsfiddle.net/ankur1990/HDq2T/
I am trying to change the text colour of .foo when the user hovers over .bar and I am unsure how to do this with only CSS. I have tried using the CSS preceding element selector ~ but that did not work.
http://jsfiddle.net/847E2/
<div>
<p class="foo">Foo</p>
<ul class="bar"><li>Bar<li></ul>
</div>
.bar:hover~.foo {
color: red;
}
EDIT - My requirements have changed. I updated my HTML structure to make the .bar a <ul>
The sibling selector ~ doesn't select elements preceding it, just elements succeeding it. Thus, when hovering over the element .bar, the element .foo cannot be selected, as it is preceding .bar.
You could do something like this instead:
jsFiddle example
div:hover :not(:hover) {
color: red;
}
Basically, this is setting the color of the child elements to color:red when hovering over the parent, div. However, it will not be applied on :hover of the element you are on. This makes it seem as though the color is changing when you hover over the sibling element.
Here's a way to do it with CSS (no CSS3 needed):
div:hover p{
color: red;
}
.foo:hover{
color: black;
}
div:hover p.bar{
color: black;
}
jsFiddle example
The + selector is an adjacent sibling combinator selector allows you to select an element that is directly after another specific element.
It doesn't matter if you use any element if have .bar class name.
NOTE: There is no "previous sibling" selector, that's why i change the elements order in the DOM.
.bar:hover + .foo {
color: red;
}
Demo http://jsfiddle.net/847E2/11/
Also can see: http://css-tricks.com/child-and-sibling-selectors/
Is there a "previous sibling" CSS selector?
Is there any way to change an element's css while focusing or hovering on one of it's children?
Ex: while I move my mouse on A, B's background color changes.
if B is a descendant A, it is possible.
--A
-----B
using #A:hover #B { background-color: blue }
DEMO
in sibling:
---A
---B
It is : #A:hover ~ #B { background-color: blue; }
DEMO
assume B is a descendant of A.
what if I want to change #A background, while I am hovering on B. how could it be?
--A
-----B
Doing this in pure CSS is unfortunately not possible...at this time. However, there is supposedly an upcoming parent selector that would work well in this scenario. Click here for more info.
Work-around
In the meantime, you can also use javascript and/or jquery to accomplish this pretty easily.
DEMO
HTML
<div id="div1">
div 1 area
<p id="paragraph">
This is paragraph
</p>
</div>
CSS
#div1 {
border:1px solid lightgray;
}
p {
margin: 50px;
background-color: lightblue;
padding: 8px;
}
.altbg {
background:grey;
}
jQuery
$(function(){
$('#paragraph').mouseenter(function(){
$(this).parent().addClass('altbg')
}).mouseout(function(){
$(this).parent().removeClass('altbg')
});
});
It is actually possible in css.
Somebody made this fiddle:
http://jsfiddle.net/u7tYE/
#a:hover + #b {
display:block;
background-color:rgb(200,200,150);
}
#b{display:none;background-color:rgb(200,200,150;}
<a id="a">Menu</a>
<div id="b">
<p>Home</p>
<p>About</p>
<p>Login</p>
</div>
It works perfectly.
I have looked at several other questions but I can't seem to figure any of them out, so here is my problem: I would like to have a div or a span, when you hover over it an area would appear and would be like a drop down.
Such as I have an div, and I want to hover over it and have it show some info about the item I hovered over
<html>
<head>
<title>Question1</title>
<styles type="css/text">
#cheetah {
background-color: red;
color: yellow;
text-align: center;
}
a {
color: blue;
}
#hidden {
background-color: black;
}
a:hover > #hidden {
background-color: orange;
color: orange;
}
</styles>
</head>
<body>
<div id="cheetah">
<p>Cheetah</p>
</div>
<div id="hidden">
<p>A cheetah is a land mammal that can run up 2 60mph!!!</p>
</div>
</body>
</html>
But this ^ doesn't seem to work, I don't know why... and if there is a way to do that in CSS, I would like to know, but I want any and all suggestions.
You can achieve this in CSS only if the hidden div is a child of the element you use for hovering:
http://jsfiddle.net/LgKkU/
You cannot affect a non-child element using :hover from within CSS2, which is supported by all common browsers.
You can affect a sibling element using CSS2.1 selectors, like so:
a:hover + .sibling { ... }
However, this only works for direct siblings. This means you could have HTML like this:
<p>Cheetah <span class="sibling">Blah Blah Blah</span></p>
Notice that the a and the span are direct siblings.
Here's a fiddle showing the siblings working: http://jsfiddle.net/vUUxp/
However, not all browsers support the CSS2.1 sibling selectors, so you need to decide based on your target audience if you can use this or not.
Edit: Corrected my mistake on the CSS version for the + selector: it's 2.1 that defines it, not CSS3. I also added a link showing browser support. Otherwise, the answer is the same.
Or, if you're open to it, use jQuery.
Something like this would work:
$("#element") // select your element (supports CSS selectors)
.hover(function(){ // trigger the mouseover event
$("#otherElement") // select the element to show (can be anywhere)
.show(); // show the element
}, function(){ // trigger the mouseout event
$("#otherElement") // select the same element
.hide(); // hide it
});
And remember to wrap this in a DOM ready function ($(function(){...}); or $(document).ready(function(){...});).
You can absolutely do this in CSS3 now using the ~ adjacent sibling selector.
triggerSelector:hover ~ targetSelector {
display: block;
}
For example, if you want a tooltip to appear when hovering over an adjacent button:
.button:hover ~ .tooltip {
display: block;
}