How can I pop up the contents of a mostly undisplayed element when it is moused over?
Given
Some text.<span class="note">Note contents.</span> Text continues.
I’d like to replace the note with, say, an * (or maybe a block of color). When that is hovered over, the note contents would pop up over the underlying text (over it, not inline).
Something like:
.note {position: absolute;
display: none}
.note::before
{display:inline;
contents: "*"}
.note:hover
{display: inline}
But of course that does not work, since .note {display:none} also hides the ::before child.
I could do this:
.note {font-size: 0}
.note::before
{content: "*";
font-size: initial}
.note:hover
{font-size: initial}
but that expands the note inline and I need it instead to overlay the text that continues after the note.
If I could change the HTML, I could add <span>*</span> before the note, and trigger the pop-up on that. But I can’t change the source HTML.
CSS3 and SASS are OK, but I can’t use Javascript.
Use visibility
.note {
display:inline-block;
white-space:nowrap;
width:5px;
visibility: hidden;
background:#fff;
}
.note::before {
visibility: visible;
content: "*";
}
.note:hover {
visibility:visible;
width:auto;
white-space:normal;
position:absolute;
}
Some text.<span class="note">Note contents.</span> Text continues. Something like:
When I hover over the 'Read my story' button in my about section on my homepage (https://howtogetrippedathome.com/), something strange happens.
When I hover the side of the button, only the button as a whole changes to red (but the text doesn't turn white). When I quickly hover over the text in the button, the text and the background of the text chagne color, but the rest of the button just slightly after.
I have read dozens of posts and tried everything, but I cannot make it work. I think it has to do with the element I am targeting, but I don't know how to do it right.
I use the following code:
.so-widget-sow-button .ow-button-base :hover {
color: #fff;
background-color: #ff2828;
transition: 0.5s;
}
Help is very much appreciated, as I am kind of lost by now.
I found this css in your stylesheet:
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:visited,
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:active,
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:hover {
color: #ff2828 !important;
}
which as you can see forces the text color of hovered links inside ow-button-base as red. Removing the a:hover line solves the conflict; I was able to solve the problem also adding this css:
.ow-button-base a.ow-icon-placement-left:hover {
color:white !important;
}
1) Remove the colors from the span, because you need the hover to be an your a tag to change
.so-widget-sow-button .ow-button-base :hover {
color: #fff; *--->remove this*
background-color: #ff2828;
transition: .3s; *---> change transition with 0.3s as it is on your a tag*
}
2) Add the new hover on your a tag an change to color of the span
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:hover span {
color: #fff;
transition: .3s;
}
3) Remove !important from the styling of the anchor tag
This is the problem
so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:hover {
color: #ff2828 !important;
}
It's overriding the color you put here.
.so-widget-sow-button .ow-button-base :hover {
color: #fff; <--- This one
background-color: #ff2828;
transition: .5s;
}
Make it stronger and/or remove the !important
this is because you have used color important in hover state of anchor,
please try below css that will resolve your issues.
.so-widget-sow-button-wire-95a2a00335aa .ow-button-base a:hover > span{color:#fff}
You have to change the "a" tag color with .ow-button-base:hover selection
.ow-button-base:hover > a
{
color:#fff;
}
and also remove
color:#ff2828 !important
Is it possible to keep an element hover effect when hovering over a sibling element? I created a jfiddle to demonstrate. I'm trying to keep the .child-menu-img 100% opacity while hovering over the H3 text. I figured out that when hovering over the .child-menu div I can affect the h3 using .child-menu-item:hover>h3 but I can't find a way to keep the hover effect working while hovering over the h3. Hope this makes sense! I'm wondering if this will require jQuery but so far, my searches haven't found any solution (javascript or pure CSS). Or maybe I need to modify my markup in order to get this working. I'm so lost!
Thanks for any help!
http://jsfiddle.net/inhouse/rfexypLz/
Seems like you need to use .child-menu-item:hover as the base for all your hover state styles:
.child-menu-item:hover a>img {
opacity: 1;
filter:alpha(opacity=100);
}
.child-menu-item:hover>h3 {
background:white;
}
.child-menu-item:hover h3 a {
opacity: 1;
filter: alpha(opacity=100);
text-decoration: none;
}
Updated fiddle
I appear to have found a flaw with CSS3 transitions. Hopefully not though. Here is the dilemma.
.element a span {
display:none;
opacity:0;
position:absolute;
top:-10px;
-webkit-transition-property:top, opacity;
-webkit-transition-duration:500ms;
}
.element a:hover span {
display:inline;
opacity:0.8;
position:absolute;
top:10px;
}
The transition does not work like this at all. If one removes the display:none attribute then it does work, however we need in this case the display:none attribute on our link so that it cannot be interfaced with before hover.
Any ideas?
Marvellous
you could try put overflow: hidden on the a, that way the span should appear invisible, without the need to use display: none; as you have moved it 10px up.
or instead of display:none; try use visibility:hidden;
Changing display:none to display:inline makes the other properties moot as far as transitions are concerned. So separate the display:none/display:block change from the class change, using setTimeout. The browser needs to see them as separate changes in order to apply your transition. Sadly I think this means you can't just use :hover but will need a JS event handler on hover.
Specifically, I would use an inline style attribute of style="display:none" that you add or remove with JS, and take display:none out of the stylesheet.
Then, in JS, after removing display:none (explicitly or via the :hover pseudoclass's style rule), use a setTimeout function that explicitly adds/removes the class. That way the "this is display:inline" change is a discrete, earlier paint-able action from the other style property changes that you want the transition rules applied to.
In the opposite direction, change the class back in an event handler, and use a setTimeout function to set display:none as an inline style. The timeout will need to match the transition duration of course (so that display:none happens after the transition is complete).
or you can try using width or height 0 combined with overflow hidden on the invisible element so it doesn't disturb any of the other elements whilst preserving the transitions.
ie.
.element a span {
overflow: hidden;
height: 0;
width: 0;
opacity:0;
position:absolute;
top:-10px;
-webkit-transition-property:top, opacity;
-webkit-transition-duration:500ms;
}
.element a:hover span {
overflow: visible;
height: ???px;
width: ???px;
opacity:0.8;
position:absolute;
top:10px;
}
I would go with JS. CSS transitions suck with heights.
Here is what I used to make a click expand function, you could change a few things and do the same on a hover
// Dropdown
$(function(){
// Target the ul sibling to keep it generic
var selector = $('.dropdown article > ul').siblings().addClass('selector');
selector.click(function(){
var targetUl = $(this).siblings('ul');
if (targetUl.hasClass('open')) {
targetUl.removeClass('open').slideUp();
} else {
targetUl.slideDown().addClass('open');
}
});
});
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>