<style>
#count2{
visibility:hidden;
}
#count1:hover{
background:#123456;
//how do I change the visibility property of #count2 here?
}
</style>
<div id="count1">My visible element</div>
<div id="count2">My flickering element</div>
My question is clear and might be little weird though. How do I change the visibility property of #count2 to true when somebody hovers on #count1, using only css.
Since you're modifying two different elements on hovering one of them, you can use a sibling combinator followed by the #count2 selector in a separate rule for modifying that particular element:
#count2 {
visibility: hidden;
}
#count1:hover {
background: #123456;
}
#count1:hover + #count2 {
visibility: visible;
}
You'll have to use the + selector, which selects adjacent siblings:
#count2 {
visibility:hidden;
}
#count1:hover {
background:#123456;
}
#count1:hover + #count2 {
visibility: visible;
}
Here's the fiddle: http://jsfiddle.net/Yyr64/
If you have to target older browsers, and you're using jQuery, this is what you gotta do:
var $count2 = $('#count2');
$('#count1').hover(function(){
$count2.css('visibility', 'visible');
}, function(){
$count2.css('visibility', 'hidden');
});
...and here's the fiddle for this: http://jsfiddle.net/Yyr64/1/
The above solutions can be abstracted with the following jsfiddle: http://jsfiddle.net/mousepotatoweb/PVHzK/2/
<style>
[id|="count-1"]{
background:#123456;
}
[id|="count-2"]{
visibility:hidden;
}
[id|="count"]:hover ~ [id|="count"] { visibility: visible;}
</style>
<div id="count-1">My visible element</div>
<div id="count-2">My flickering element</div>
count2 would need to be a child of count1 in order to do this via css only.
<div id="count1">
My visible element
<div id="count2">My flickering element</div>
</div>
#count1:hover #count2{ display: block; background: #ffff00; }
#count2{ display: none; }
When using css2 though, you can use the + selector as in Joseph Silber's answer
Use
display:none;
instead of visibility property.
You can take a look at jquery
http://api.jquery.com/show/
Related
Is this possible, with CSS ?
Apply this rule if .div1 doesn't exist:
.div2{
property: value;
}
like
<div class="div1">
...
</div>
<div class="div2">
<!-- it exists, so do nothing -->
</div>
and
<div class="div2">
<!-- it doesn't exist, apply the css -->
</div>
Exists, or doesn't exist? Your question confuses me :)
Apply style to .div2 if .div1 exists:
Option 1: .div2 follows directly after .div1
.div1 + .div2 {
property: value;
}
Option 2: .div2 follows .div1 as a sibling:
.div1 ~ .div2 {
property: value;
}
Style .div2 without .div1:
It's a bit of a hack, but you could do the reverse.
Style .div2 normally, and then override the styling with the selectors above.
If .div1 doesn't exist, .div2 gets the normal styling.
.div2 {
background: #fff;
}
.div1 + .div2 {
background: #f00; /* override */
}
/* or */
.div1 ~ .div2 {
background: #f00; /* override */
}
If you know the 'unstyled' styles of the div, you could use a css sibling selector to style it one way if it follows .div1, and the 'plain' way if it doesnt - ie
.div2 {
/* styled however you want */
}
.div1 + .div2 {
/* 'plain' styling */
}
See the fiddle. Try removing div1 to see div2 as it would be styled without div1
Generally speaking, no, you can't do that.
But you may 'hack' it using CSS selectors, I'm referring to to:
+ .something selector
~ .something selector
I'd use the second selector, which is the "general sibling" selector.
Given the HTML you posted you can apply the style to the .div2 class and then reset it using the .div1 ~ .div2 selector.
So something like this:
.div1 {
color: red;
}
.div2 {
color: blue;
}
.div1 ~ .div2 {
color: black;
}
In this way, with the first HTML snippet the div2 will be black and with the second snippet it will be blue.
NO
With CSS alone, the if conditions which check the availability of an element, is not possible. You should use JavaScript, (jQuery is recommended).
Notes: With CSS you can check some conditions of an element, like checking if an element has an attribute (like input[type=text]), or checking if an element is the first element of a list (like p:first-child), etc. But you can't check anything from the element's sibling elements, or ancestors. Also you can't check the negative conditions most of the times.
No, this is not possible. But you can create class "div3" and in your code determine whether DIV1 exists and in that case apply the "div3" class instead of "div2"
i got this:
<div id="father">
<span class="child1"><span>
<div class="child2"><div>
</div>
i need to change text color of child2 on father:hover, and i was able to do that,
but when i hover on child1, child2 loose color and is displayed normally, how can i set hover on child1 so do not loose hover effect ?
i've already tried with and it doesn't work
.child1:hover .child2{ color: #eed847; }
thanks
.child1 is not a parent of .child2 in your example, which is expected by your use of space in the selector.
The following selector should work, when any of .child1 or .child2 is hovered.
#father:hover .child2 { ... }
Demo
If you don't want the text color of the second child to change you could use a workaround like this:
#father:hover .child2 {color: #eed847;}
.child2:hover {color: #000!important;}
In this example the text of child2 will stay black when you only hover over child2.
You could use a sibling selector in your CSS, Chris Coyier has written a fair bit about them here.
.child1:hover + .child2 { #some css };
The closing tags of HTML were invalid. I modifed your HTML and added css for your needed behaviour.
HTML
<div id="father"> <span class="child1">child1</span>
<div class="child2">child2</div>
</div>
CSS
#father {
width: 100px;
height: 100px;
background-color: cornflowerblue;
}
.child1 {
background-color: green;
}
.child2, #father span.child1:hover + div.child2 {
background-color: blue;
}
#father:hover .child2 {
background-color: red;
}
Working Fiddle
I am wondering if how could I show other element when the user hovers to a certain element.
For example,
<div class = "hoverMe">Hover Me </div>
<div class = "showMe">Hello I'm in show state.</div>
.showMe{
display: none;
}
.hoverMe:hover {
// then what to put here?
}
If the user hovers on .hoverMe the .showMe will be shown in pure css thankz.
I don't have 50 rep yet, so I can't comment on the above answer.
It is possible to do this purely in CSS using the tilde (~);
.hoverMe:hover ~ .showMe {
display: block;
}
MDN docs
You have to use the adjacent sibling selector +
.hoverMe:hover + div {
display:block;
}
From MDN
It will select only the element that is immediately preceded by the former element
Fiddle
Using jQuery, you will have to use the hover() function
$(".hoverMe").on("hover", function () {
$(".showMe").css("display", "block");
});
I have this LESS setup:
.wrapper {
.parent {
height: 100px;
.children {
//some style;
&:hover {
.parent & {
height: 150px;
}
}
}
}
}
I need to change some height for parent element by hover on some child inside of it. This code is not working, so is there any possible to do this? Much thx for help.
Adding the :hover to the .parent instead of the .children div will achieve the result, http://codepen.io/duncanbeattie/pen/xvDdu
.wrapper {
.parent {
pointer-events:none;
height: 100px;
background:#000;
.children {
//some style;
height:20px;
background:#f00;
pointer-events:all;
}
&:hover {
height:150px;
}
}
}
The main problem here is that unfortunately you can NOT style the parent in any way from the perspective of a child's selector (with or without :hover) in CSS. See this answer here.
You can only style children according to their parents' selectors or siblings according to each-other's selectors.
That said, there are of course easy ways to achieve this with javascript/jQuery,
but not in LESS, as its output is CSS, so the above limitations apply again.
But fortunately some properties of children influence some properties of their parents ... so by styling children, you will affect the parent also. If the child (block) is positioned relatively inside a parent (block), the parents height should adapt to the height (including padding, margin and border) of the child, without you having to do anything really special to the parent.
DEMO
.parent {
width:200px;
background:orange;
}
.child {
background:red;
width:100px;
height:100px;
}
.child:hover {
height:200px;
}
<div class="parent">
<div class="child"></div>
</div>
Make your CSS like this:
.parent.over {
/* whatever style you want when teh child is hovered over */
}
Using jQuery:
$(".children").hover(
function() {
$(this).closest(".parent").removeClass("over").addClass("over");
}, function() {
$(this).closest(".parent").removeClass("over");
}
);
I would like to show a div when someone hovers over an <a> element, but I would like to do this in CSS and not JavaScript. Do you know how this can be achieved?
You can do something like this:
div {
display: none;
}
a:hover + div {
display: block;
}
<a>Hover over me!</a>
<div>Stuff shown on hover</div>
This uses the adjacent sibling selector, and is the basis of the suckerfish dropdown menu.
HTML5 allows anchor elements to wrap almost anything, so in that case the div element can be made a child of the anchor. Otherwise the principle is the same - use the :hover pseudo-class to change the display property of another element.
.showme {
display: none;
}
.showhim:hover .showme {
display: block;
}
<div class="showhim">HOVER ME
<div class="showme">hai</div>
</div>
jsfiddle
Since this answer is popular I think a small explanation is needed. Using this method when you hover on the internal element, it wont disappear.
Because the .showme is inside .showhim it will not disappear when you move your mouse between the two lines of text (or whatever it is).
These are example of quirqs you need to take care of when implementing such behavior.
It all depends what you need this for. This method is better for a menu style scenario, while Yi Jiang's is better for tooltips.
I found using opacity is better, it allows you to add css3 transitions to make a nice finished hover effect. The transitions will just be dropped by older IE browsers, so it degrades gracefully to.
#stuff {
opacity: 0.0;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
#hover {
width:80px;
height:20px;
background-color:green;
margin-bottom:15px;
}
#hover:hover + #stuff {
opacity: 1.0;
}
<div id="hover">Hover</div>
<div id="stuff">stuff</div>
I'm by no means an expert, but I'm incredibly proud of myself for having worked something out about this code. If you do:
div {
display: none;
}
a:hover > div {
display: block;
}
Note the >, a direct child selector.
You can contain the whole thing in an a tag, then, as long as your trigger (which can be in it's own div, or straight up in the a tag, or anything you want) is physically touching the revealed div, you can move your mouse from one to the other.
Maybe this isn't useful for a great deal, but I had to set my revealed div to overflow: auto, so sometimes it had scroll bars, which couldn't be used as soon as you move away from the div.
In fact, after finally working out how to make the revealed div, (although it is now a child of the trigger, not a sibling), sit behind the trigger, in terms of z-index, (with a little help from this page: How to get a parent element to appear above child) you don't even have to roll over the revealed div to scroll it, just stay hovering over the trigger and use your wheel, or whatever.
My revealed div covers most of the page, so this technique makes it a lot more permanent, rather than the screen flashing from one state to another with every move of the mouse. It's really intuitive actually, hence why I'm really quite proud of myself.
The only downside is that you can't put links within the whole thing, but you can use the whole thing as one big link.
This answer doesn't require that you know the what type of display (inline, etc.) the hideable element is supposed to be when being shown:
.hoverable:not(:hover) + .show-on-hover {
display: none;
}
<a class="hoverable">Hover over me!</a>
<div class="show-on-hover">I'm a block element.</div>
<hr />
<a class="hoverable">Hover over me also!</a>
<span class="show-on-hover">I'm an inline element.</span>
This uses the adjacent sibling selector and the not selector.
I would like to offer this general purpose template solution that expands on the correct solution provided by Yi Jiang's.
The additional benefits include:
support for hovering over any element type, or multiple elements;
the popup can be any element type or set of elements, including objects;
self-documenting code;
ensures the pop-up appears over the other elements;
a sound basis to follow if you are generating html code from a database.
In the html you place the following structure:
<div class="information_popup_container">
<div class="information">
<!-- The thing or things you want to hover over go here such as images, tables,
paragraphs, objects other divisions etc. -->
</div>
<div class="popup_information">
<!-- The thing or things you want to popup go here such as images, tables,
paragraphs, objects other divisions etc. -->
</div>
</div>
In the css you place the following structure:
div.information_popup_container {
position: absolute;
width:0px;
height:0px;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information {
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.popup_information {
position: fixed;
visibility: hidden;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}
A few points to note are:
Because the position of the div.popup is set to fixed (would also work with absolute) the content is not inside the normal flow of the document which allows the visible attribute to work well.
z-index is set to ensure that the div.popup appears above the other page elements.
The information_popup_container is set to a small size and thus cannot be hovered over.
This code only supports hovering over the div.information element. To support hovering over both the div.information and div.popup then see Hover Over The Popup below.
It has been tested and works as expected in Opera 12.16 Internet Explorer 10.0.9200, Firefox 18.0 and Google Chrome 28.0.15.
Hover Over The Popup
As additional information. When the popup contains information that you might want to cut and paste or contains an object that you might want to interact with then first replace:
div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}
with
div.information_popup_container > div.information:hover + div.popup_information
,div.information_popup_container > div.popup_information:hover {
visibility: visible;
z-index: 200;
}
And second, adjust the position of div.popup so that there is an overlap with div.information. A few pixels is sufficient to ensure that the div.popup is can receive the hover when moving the cusor off div.information.
This does not work as expected with Internet Explorer 10.0.9200 and does work as expected with Opera 12.16, Firefox 18.0 and Google Chrome 28.0.15.
See fiddle http://jsfiddle.net/F68Le/ for a complete example with a popup multilevel menu.
The + allow 'select' only first not nested element , the > select nested elements only - the better is to use ~ which allow to select arbitrary element which is child of parent hovered element. Using opacity/width and transition you can provide smooth appear
div { transition: all 1s }
.ccc, .ggg { opacity: 0; color: red}
.ccc { height: 0 }
.aaa:hover ~ .bbb .ccc { opacity: 1; height: 34px }
.aaa:hover ~ .eee .fff .ggg { opacity: 1 }
<div class="aaa">Hover me... to see<br><br> </div>
<div class='bbb'>BBBBB
<div class='ccc'>CCCCC
<div class='ddd'>DDDDD</div>
</div>
</div>
<div class='eee'>EEEEE
<div class='fff'>FFFFF
<div class='ggg'>GGGGG</div>
<div class='hhh'>HHHHH</div>
</div>
</div>
please test this code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
div
{
display:none;
color:black
width:100px;
height:100px;
background:white;
animation:myfirst 9s;
-moz-animation:myfirst 9s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
#keyframes myfirst
{
0% {background:blue;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
#-moz-keyframes myfirst /* Firefox */
{
0% {background:white;}
50% {background:blue;}
100% {background:green;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
a:hover + div{
display:inline;
}
</style>
</head>
<body>
Hover over me!
<div>the color is changing now</div>
<div></div>
</body>
</html>
For me, if I want to interact with the hidden div without seeing it disappear each time I leave the triggering element (a in that case) I must add:
div:hover {
display: block;
}
Based on the main answer, this is an example, useful to display an information tooltip when clicking on a ? near a link:
document.onclick = function() { document.getElementById("tooltip").style.display = 'none'; };
document.getElementById("tooltip").onclick = function(e) { e.stopPropagation(); }
document.getElementById("help").onclick = function(e) { document.getElementById("tooltip").style.display = 'block';
e.stopPropagation(); };
#help { opacity: 0; margin-left: 0.1em; padding: 0.4em; }
a:hover + #help, #help:hover { opacity: 0.5; cursor: pointer; }
#tooltip { border: 1px solid black; display: none; padding: 0.75em; width: 50%; text-align: center; font-family: sans-serif; font-size:0.8em; }
Delete all obsolete informations<span id="help">?</span>
<div id="tooltip">All data older than 2 weeks will be deleted.</div>
HTML
<div>
<h4>Show content</h4>
</div>
<div>
<p>Hello World</p>
</div>
CSS
div+div {
display: none;
}
div:hover +div {
display: block;
}
CodePen :hover on div show text in another div
If you follow this method, element will appear even if you hover over the hidden element. This will be useful if you want to click on the hidden element. For an example you might want to see a delete option and then click on it.
<style>
#delete_link {
display: none;
}
a:hover + #delete_link {
display: block;
}
#delete_link:hover{
display: block;
}
</style>
</head>
<body>
<a>Hover over me!</a>
<div id="delete_link">Element show on hover</div>
</body>
From my testing using this CSS:
.expandable{
display: none;
}
.expand:hover+.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}
And this HTML:
<div class="expand">expand</div>
<div class="expand">expand</div>
<div class="expandable">expandable</div>
, it resulted that it does expand using the second , but does not expand using the first one. So if there is a div between the hover target and the hidden div, then it will not work.
Don't forget. if you are trying to hover around an image, you have to put it around a container.
css:
.brand:hover + .brand-sales {
display: block;
}
.brand-sales {
display: none;
}
If you hover on this:
<span className="brand">
<img src="https://murmure.me/wp-content/uploads/2017/10/nike-square-1900x1900.jpg"
alt"some image class="product-card-place-logo"/>
</span>
This will show:
<div class="product-card-sales-container brand-sales">
<div class="product-card-">Message from the business goes here. They can talk alot or not</div>
</div>