I am hiding a div with the class .text with
div.text{
visibility:hidden;
}
This div is surrounded by another div with the class .col3
<div class="col3">
<div class="image-box">
<div class="text"> test </div>
</div>
</div>
I want the visibility to change to "visible" when i hover col3
i tried
.col3:hover + div.text {
visibility:visible;
}
however it doesnt seem to work this way.
strange thing is , when i do
.image-box:hover + div.text{
visibility:visible;
}
It does show the text div when i hover the image box, but thats not what i want, i want it to show when i hover the surrounding div......
any help is welcome...
This should work:
.col3:hover div.text {
visibility:visible;
}
The use of the + selector is incorrect as it targets elements directly following the first element. More information can be found here.
+ in CSS is known as an "adjacent sibling combinator". A sibling is an element which is contained within the same parent as another element. In this case, your .image-box element is a sibling of your .text element. Both of these elements are children of your .col3 element. Your first selector will not select anything as .text isn't a sibling of .col3.
You'll need to use either a descendant combinator:
.col3:hover div.text {
visibility: visible;
}
Or a child combinator:
.col3:hover > div.text {
visibility: visible;
}
The reason why your
.col3:hover + div.text
Isn't working is because you're using an adjacent selector. What you're basically saying is "Take any div-node with the class text, that is lying on the same level as .col3, and do something with it when .col3 is hovered". But there isn't any. The div.text is not on the same level as .col3, but a direct child of it.
What you want to do is:
.col3:hover > div.text {
visibility:visible;
}
Which says "Take any div.text which is a direct child node of .col3, and do something with it, when .col3 is hovered".
Related
I'm trying to make a div with text within it that is going to change whenever the user hovers over the div area, and not only the p tag. I am however not able to make my solution work.
JSfiddle
div{
height:200px;
width:400px;
background-color:#fbfb2b;
}
div:hover + p{
color:#fff;
}
Take away the + symbol in your css:
JSFiddle
CSS:
div{
height:200px;
width:400px;
background-color:#fbfb2b;
}
div:hover p{
color:#fff;
}
If you were looking for the selector which means direct descendant of div, you wanted >.
eg:
div:hover > p{
/*styles*/
}
Which would have worked for:
<div>
<p>Stuff</p>
</div>
But not
<div>
<span>
<p>Incorrect HTML example</p>
</span>
</div>
With your current CSS, you're trying to select the sibling.
If your HTML was like this:
<div></div>
<p>Some piece of text that is gonna change color when hovering the div</p>
the colour of p would have changed.
Ultimately however, with this specific HTML, you don't even need to include the p in the css and can just do div:hover, but if you're going to have other elements in it, then you should keep the p.
Take out the + P
div:hover {
color: #fff;
}
In your css you have used like this.
div:hover + p{
color:#fff;
}
It means you are applying the hover style for the siblings element not child element. In your case you need to remove + and add just space.
SIBLINGS ELEMENT PROVED HERE
div:hover p{
color:#fff;
}
CHILD ELEMENT PROVED HERE
there is no need to mention the <p> at all you can simply state the colour of all child elements by setting the style on the parent:
JSFiddle
div:hover {
color:#fff;
}
However if you did just want to target the paragraph text only you would use a > (child combinator) to target the P ONLY.
You must read rule about descendant selectors here.
If you need more info about selectors in css
Solved:
div:hover p{
color: #fff;
}
Your Css:
div:hover + p{
color:#fff;
}
+ selector select all <p> elements that are placed immediately after <div> elements.
Demo Fiddle With "+" selector
You can see, In the above fiddle div:hover + p select the outer <p> element, which are placed immediately after <div> elements.
But in your Case you do not need to use + selector. Because you want to select the child element of hovered div.
So, you should try this:
div:hover p{
color:#fff;
}
Working Example
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 want to see 2nd div when mouse Over.
HTML
<a>Hover over me!</a>
<div class="ab">Some content</div>
<div class="abc">Some text here</div>
CSS
.abc {
display: none;
}
a:hover + .abc{
display: block;
}
The adjacent sibling combinator is not exactly what you want. It can only select the div with the class .ab, because it's directly following the anchor.
What you want is this:
a:hover ~ .abc {
/*...*/
}
This selects every .abc which is following a hovered anchor element, but it don't has to be directly before it.
Had some delay reaching SO so this is late. Here a fiddle for my answer: http://jsfiddle.net/digitalextremist/F5k4L/
The main issue here uses #kleinfreud's suggestion about an adjacent div but weaves in another approach to showing and hiding a div:
.abc {
opacity: 0;
}
a:hover ~ .abc{
opacity: 100;
}
This makes sure the space that div will take up is reserved to begin with, then showing it when needed.
So is it possible to make this work
#element img:hover #otherelement {...}
like
#element:hover #otherelement {...}
it's important for img to stay specified, because images are automatic in what I'm making.
As img cannot hold any other nested tag, I assume you are targeting the adjacent element, you can use adjacent selector here using +
#element img:hover + #otherelement {...}
The above selector will select the element next to img tag when the image is hovered.
Note: Above selector will work only if you've your markup like
<div id="element">
<img src="#" />
<div id="otherelement"></div >
</div >
But will fail if you've markup like
<div id="element">
<img src="#" />
</div >
<div id="otherelement"></div >
What you can do is selecting next element(s) by:
Adjacent sibling combinator
element1 + element2 Selects every element2 element that are placed immediately after element1 element(s). They're siblings.
#element img:hover + #otherelement
If the #otherelement is placed right after img, it'll be selected when img is hovered.
Another option is:
General sibling combinator
element1 ~ element2 Matches occurrences of element2 that are preceded by element1 while they have the same parent. They're siblings too, but element2 doesn't have to be immediately preceded by element1.
#element img:hover ~ #otherelement
If #otherelement and img are siblings, and #otherelement is placed somewhere after the img, it'll be selected when img is hovered.
Here is an example
HTML
<div id="parent">
<img src="http://lorempixel.com/200/200/" alt="Sport">
<div class="text">This is a text.</div>
</div>
CSS:
#parent {
overflow: hidden;
width: 200px;
height: 200px;
}
.text {
position: relative;
-webkit-transition: .3s all;
-moz-transition: .3s all;
transition: .3s all;
background-color: rgba(255,255,255,.5);
height: 40px;
line-height: 40px;
}
#parent img:hover + .text {
top: -40px;
}
What your first selector is looking for is something called #otherelement inside an image. Images can't have child elements.
If the element is a sibling of the image, you might want to try img:hover~#otherelement or img:hover+#otherelement.
Yes it is, try:
#element:hover + #otherelement {...}
or
#element:hover ~ #otherelement {...}
You can use the :hover pseudo class on any element. There are considerations to be made in regards to cross-browser. You can use a polyfill like Selectivizr for that, though.
As for your question, you might want to consider targeting a shared ancestor for both elements you are trying to target with the hover and apply your styles that way.
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