I was trying to make a text box appear when I hovered over something different.
In my code: I want to hover over the h1 block and make the h3 block appear.
h1.title {
font-size: 100px;
background: url(https://upload.wikimedia.org/wikipedia/commons/f/f3/Orion_Nebula_-_Hubble_2006_mosaic_18000.jpg);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: 5.6s ease, 3s transform;
}
h1.title:hover {
background-position: left;
transform: translateX(150px) /* Where the .ps would appear */
}
.ps {
visibility: hidden;
}
<div class="title">
<h1 class="title">Random Thing</h1>
<h3 class="ps">Playing around in HTML!</h3>
</div>
You can use the adjacent sibling combinator +:
https://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators
h1.title:hover + .ps {
visibility: visible;
}
First of all, comments in css are made by
/* text */
The answer to your question:
h1.title:hover + .ps {
display: block;
}
Don't use visibility styling because when I used it before it didn't work. And display is more common.
Hope this works!
You can also use
h1.title:hover + #ps {
opacity: 1;
}
Sometimes I can't use a dot when making code that represents an element with an id.
Related
I use this hover-effect, where everything but the hovered Element fades out, you can see it in the snippet below.
Its working in Firefox (Version 66.0.3 ) but not in Chrome (Version 73.0.3683.103). I also tried Microsoft Edge, it works there aswell.
I tried adding "-webkit-" because I read, that this could fix the problem, but it didn´t.
Anybody an idea how to achieve this hover-effect in Chrome?
.links{
font-weight: bold;
font-size: 20px;
}
/* Hover Effect */
.hover {
visibility: hidden;
}
.hover > * {
visibility: visible;
transition: opacity 100ms linear 100ms;
}
.hover:hover > * {
opacity: 0.3;
}
.hover > *:hover {
opacity: 1;
transition-delay: 0ms, 0ms;
}
EDIT:
It works in Chrome, if I remove the links (in my case references to other pages of the website).
Working in Chrome:
.links {
font-weight: bold;
font-size: 20px;
}
/* Hover Effect */
.hover {
visibility: hidden;
}
.hover>* {
visibility: visible;
transition: opacity 100ms linear 100ms;
}
.hover:hover>* {
opacity: 0.3;
}
.hover>*:hover {
opacity: 1;
transition-delay: 0ms, 0ms;
}
<div class="links">
<div class="hover">
<div class="linkNav">1</div>
<div class="linkNav">2</div>
<div class="linkNav">3</div>
</div>
</div>
Not Working in Chrome:
.links {
font-weight: bold;
font-size: 20px;
}
/* Hover Effect */
.hover {
visibility: hidden;
}
.hover>* {
visibility: visible;
transition: opacity 100ms linear 100ms;
}
.hover:hover>* {
opacity: 0.3;
}
.hover>*:hover {
opacity: 1;
transition-delay: 0ms, 0ms;
}
<div class="links">
<div class="hover">
<a href="1.html">
<div class="linkNav">1</div>
</a>
<a href="2.html">
<div class="linkNav">2</div>
</a>
<a href="3.html">
<div class="linkNav">3</div>
</a>
</div>
</div>
(N.b. I have updated this answer after noting the problem with the HTML).
I simplified your CSS to try and isolate the problem (I removed the visibility properties that aren't doing anything as well as the > * selectors)
It's unsurprising there is unpredictable behaviour in this case because strictly speaking you shouldn't be putting a block level element such as <div> inside an <a> element.
It seems that, in this case of malformed HTML, Chrome won't recognise the opacity value of the anchor (<a>) tag unless I do something like set it to display: block or display:inline-block. FireFox, Edge and IE do recognise the opacity regardless.
The best solution would be to fix your HTML so that the block level elements wrap the inline elements properly.
.links {
font-weight: bold;
font-size: 20px;
}
.hover:hover a {
opacity: 0.3;
}
.hover a:hover {
opacity: 1;
}
<div class="links hover">
<div class="linkNav">1</div>
<div class="linkNav">2</div>
<div class="linkNav">3</div>
</div>
I would recommend fixing it like this but if for some reason you can't fix the HTM a workaround is to set the display property on your anchor tags. Like so:
.links {
font-weight: bold;
font-size: 20px;
}
.links a {
display:block;
}
.hover:hover a {
opacity: 0.3;
}
.hover a:hover {
opacity: 1;
}
<div class="links hover">
<div class="linkNav">1</div>
<div class="linkNav">2</div>
<div class="linkNav">3</div>
</div>
Or else an alternative solution is you could simply target an alternative element, such as the inner div instead of the a tag.
JSFiddle links for the different workaround solutions and the original CVE that demonstrates the issue (useful for testing in different browsers):
Solution by setting display block
Solution by changing selector to target inner div
Original CVE which works in most browsers but not Chrome
I have corrected the code
the problem here was in the ordering you were adding HTML
The a tag has div inside it and class on that which the selector on hover was unable to reach to.
Now see, it works fine.
This is it I guess.
Hope it solves your problem.
.links {
font-weight: bold;
font-size: 20px;
}
/* Hover Effect */
.hover {
visibility: hidden;
}
.hover>* {
visibility: visible;
transition: opacity 100ms linear 100ms;
}
.hover:hover>* {
opacity: 0.3;
}
.hover>*:hover {
opacity: 1;
transition-delay: 0ms, 0ms;
}
<div class="links">
<div class="hover">
1
2
3
</div>
</div>
I've noticed an unanticipated effect of using CSS color transitions on an image with a transparent background. Here's an example:
:root {
--size: 4em;
--duration: 5s;
}
html, body {
margin: 0;
background: slategray;
color: white;
}
.main-menu {
overflow: hidden;
background: black;
}
.main-menu *:hover {
background: skyblue;
-webkit-transition-duration: 5s;
transition-duration: var(--duration);
}
.image-div {
float: right;
padding: calc(var(--size) / 2);
-webkit-transition-duration: 5s;
transition-duration: var(--duration);
}
.image {
max-width: var(--size);
}
<div class="main-menu">
<div class="image-div">
<img class="image" src="https://s4.postimg.org/5zy6kjqcd/maximize.png"/>
</div>
</div>
To summarize, the issue is this. If you hover over the image-div div's padding, the background color of this div and the contained image div execute the color transition at the same rate, as expected. However, if you hover over the image div, its color appears to transition slightly faster than the image-div div's color.
Given the fact that I was able to reproduce this exact behavior on Firefox, Chrome, Safari and Edge, I get the feeling that this is expected behavior, but I would like to understand why it is happening.
When you hover over the img two hover events are triggered - one on the img and one on its parent image-div when you use * in .main-menu *:hover selector:
Instead use the hover only on the image-div as below:
.main-menu .image-div:hover {
background: skyblue;
}
and now the difference in transition will not be there - see demo below:
html, body {
margin: 0;
background: slategray;
color: white;
}
.main-menu {
overflow: hidden;
background: black;
}
.main-menu .image-div:hover {
background: skyblue;
}
.image-div {
float: right;
padding: calc(4em / 2);
-webkit-transition-duration: 5s;
transition-duration: 5s;
}
.image {
max-width: 4em;
}
<div class="main-menu">
<div class="image-div">
<img class="image" src="https://s4.postimg.org/5zy6kjqcd/maximize.png"/>
</div>
</div>
Given the fact that I was able to reproduce this exact behavior on
Firefox, Chrome, Safari and Edge, I get the feeling that this is
expected behavior, but I would like to understand why it is happening.
The reason this happens is because the img transition picks up the image-div transitioned color, hence get lighter faster.
Simply put, the image-div goes from a solid black, while the img goes from black that turns into sky blue.
Additionally, since you move the mouse over the image-div before it gets to the img, the transition starts before, though the delay is based on how fast you move the mouse to the img
I have a blockquote like this:
<blockquote class="spoiler">Soopah sekkrit!</blockquote>
I want to make it hidden, only showing it if the user hovers over it. I'm doing it now with JS:
blockquote.addEventListener('mouseover', function() {
this.style.height = this.offsetHeight + 'px';
this.dataset.contents = this.innerHTML;
this.innerHTML = '';
});
blockquote.addEventListener('mouseout', function() {
this.style.height = '';
this.innerHTML = this.dataset.contents;
});
Is there a better way to do this, with CSS?
It has to keep its background-color, size, and work for contents with custom colors. If possible, I'd also like to animate it so the contents fade in gradually.
Here's something very similar to what I use in SOUP:
.spoiler, .spoiler > * { transition: color 0.5s, opacity 0.5s }
.spoiler:not(:hover) { color: transparent }
.spoiler:not(:hover) > * { opacity: 0 }
/* fix weird transitions on Chrome: */
blockquote, blockquote > *:not(a) { color: black }
.spoiler, .spoiler > * { transition: color 0.5s, opacity 0.5s }
.spoiler:not(:hover) { color: transparent }
.spoiler:not(:hover) > * { opacity: 0 }
/* fix weird transitions on Chrome: */
blockquote, blockquote > *:not(a) { color: black }
/* some basic bg styles for demonstration purposes */
blockquote { background: #fed; margin: 1em 0; padding: 8px; border-left: 2px solid #cba }
code { background: #ccc; padding: 2px }
img { vertical-align: middle }
<blockquote class="spoiler">
Soopah sekkrit text with <code>code</code> and links and <img src="//sstatic.net/stackexchange/img/logos/so/so-logo-med.png" width="100" /> images!
<p>You can also have paragraphs in here.</p>
<ul><li>And lists too!</li></ul>
<blockquote class="spoiler">Even nested spoilers work!</blockquote>
</blockquote>
This is somewhat simpler than your own solution, and works for arbitrary content including images and even nested spoilers! (See demo snippet above.)
Alas, this method seems to suffer from weird transition effects on Chrome if any of the child elements of the spoiler have color: inherit. (Basically, what's happening is that these elements will have both their text color set to transparent and their opacity set to 0. Because opacities combine multiplicatively, the combined transition will thus appear slower — halfway through the fade-in, when the element itself is at 50% opacity, the text in it is at 50% × 50% = 25% opacity.) I've added an extra CSS rule to the example above to fix this, but it does make things a bit complicated.
What I actually do in SOUP is slightly different. I wrap the contents of each spoiler in an extra inner <div>, which lets me simplify the CSS further to just:
.spoiler > div { opacity: 0; transition: opacity 0.5s }
.spoiler:hover > div { opacity: 1 }
.spoiler > div { opacity: 0; transition: opacity 0.5s }
.spoiler:hover > div { opacity: 1 }
/* some basic bg styles for demonstration purposes */
blockquote { background: #fed; margin: 1em 0; padding: 8px; border-left: 2px solid #cba }
code { background: #ccc; padding: 2px }
img { vertical-align: middle }
<blockquote class="spoiler"><div>
Soopah sekkrit text with <code>code</code> and links and <img src="//sstatic.net/stackexchange/img/logos/so/so-logo-med.png" width="100" /> images!
<p>You can also have paragraphs in here.</p>
<ul><li>And lists too!</li></ul>
<blockquote class="spoiler"><div>Even nested spoilers work!</div></blockquote>
<div></blockquote>
The main advantages of this method are simplicity and robustness: I don't have to use :not() selectors, improving compatibility with older browsers, and the transition styles can't conflict with other transitions possibly defined on the elements inside the spoiler. This method also doesn't suffer from the color transition weirdness on Chrome described above, since it only uses opacity transitions.
Overall, this is the method I recommend. The disadvantage, of course, is that you need to include the extra <div>s in your HTML.
Ps. Please consider also providing some way to make the spoilers permanently visible, especially for touch screen users who may find it very hard to "hover" the cursor over an element. A simple solution is to use a JavaScript click event handler to toggle the spoiler class, e.g. like this (using jQuery):
$('.spoiler').on( 'click', function (e) {
$(this).toggleClass('spoiler');
e.stopPropagation();
} );
$('.spoiler').on( 'click', function (e) {
$(this).toggleClass('spoiler');
e.stopPropagation();
} );
.spoiler > div { opacity: 0; transition: opacity 0.5s }
.spoiler:hover > div { opacity: 1 }
/* some basic bg styles for demonstration purposes */
blockquote { background: #fed; margin: 1em 0; padding: 8px; border-left: 2px solid #cba }
code { background: #ccc; padding: 2px }
img { vertical-align: middle }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<blockquote class="spoiler"><div>
Soopah sekkrit text with <code>code</code> and links and <img src="//sstatic.net/stackexchange/img/logos/so/so-logo-med.png" width="100" /> images!
<p>You can also have paragraphs in here.</p>
<ul><li>And lists too!</li></ul>
<blockquote class="spoiler"><div>Even nested spoilers work!</div></blockquote>
<div></blockquote>
or, if you'd prefer to use delegated event handling (so that you don't have to keep adding new click handlers every time you load new content that includes spoilers via Ajax):
$(document).on( 'click', '.spoiler, .spoiler-off', function (e) {
$(this).toggleClass('spoiler').toggleClass('spoiler-off');
e.stopPropagation();
} );
$(document).on( 'click', '.spoiler, .spoiler-off', function (e) {
$(this).toggleClass('spoiler').toggleClass('spoiler-off');
e.stopPropagation();
} );
.spoiler > div { opacity: 0; transition: opacity 0.5s }
.spoiler:hover > div { opacity: 1 }
/* some basic bg styles for demonstration purposes */
blockquote { background: #fed; margin: 1em 0; padding: 8px; border-left: 2px solid #cba }
code { background: #ccc; padding: 2px }
img { vertical-align: middle }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<blockquote class="spoiler"><div>
Soopah sekkrit text with <code>code</code> and links and <img src="//sstatic.net/stackexchange/img/logos/so/so-logo-med.png" width="100" /> images!
<p>You can also have paragraphs in here.</p>
<ul><li>And lists too!</li></ul>
<blockquote class="spoiler"><div>Even nested spoilers work!</div></blockquote>
<div></blockquote>
(These should work with either of the CSS variants shown above.)
Yes, this is possible with CSS. Essentially, you want to make all of the contents be invisible. In CSS, this means transparent.
First use the hover pseudo-class inside the not pseudo-class:
.spoiler:not(:hover)
But we also need to select all the child elements of the hovered spoiler, to set their colors and backgrounds:
.spoiler:not(:hover) *
And we set both the color and background (only for the child elements) to transparent to make them invisible to the user. All together:
.spoiler:not(:hover), .spoiler:not(:hover) * { color: transparent }
.spoiler:not(:hover) * { background: transparent }
code { padding: 2px; background: #bbb }
a { color: #00f }
Hover: <blockquote class="spoiler">Some stuff <a>and a colored link</a> <code>and some code!</code></blockquote>
We can also add a transition to make it smoother:
.spoiler { transition: color 0.5s } /* we have to put this outside the :hover to make it work fading both in and out */
.spoiler:not(:hover), .spoiler:not(:hover) * { color: transparent }
.spoiler * { transition: color 0.5s, background 0.5s }
.spoiler:not(:hover) * { background: transparent }
code { padding: 2px; background: #bbb; color: #000 } /* add color to prevent double transition */
a { color: #00f }
Hover: <blockquote class="spoiler">Some stuff <a>and a colored link</a> <code>and some code!</code></blockquote>
To make it obvious to the user that the blockquote is hoverable, you can add some text with the ::after pseudo-element to be shown when the blockquote isn't hovered:
.spoiler { transition: color 0.5s; position: relative } /* relative position for positioning the pseudo-element */
.spoiler:not(:hover), .spoiler:not(:hover) * { color: transparent }
.spoiler * { transition: color 0.5s, background 0.5s }
.spoiler:not(:hover) * { background: transparent }
.spoiler::after {
content: 'hover to view spoiler';
position: absolute;
top: 0; left: 0;
color: transparent;
}
.spoiler:not(:hover)::after {
color: #666;
transition: color 0.3s 0.3s; /* delayed transition to keep the text from overlapping */
}
code { padding: 2px; background: #bbb; color: #000 }
a { color: #00f }
<blockquote class="spoiler">
Some stuff <a>and a colored link</a> <code>and some code!</code>
<blockquote class="spoiler">Nesting bonus!</blockquote>
</blockquote>
For stuff like images, svgs (tho inline SVG can be very granularly controlled), canvases, and all that fancy stuff, instead of color you'd have to use opacity. We can make it work with these by adding this:
.spoiler img { transition: opacity 0.5s, background 0.5s }
.spoiler:not(:hover) img { opacity: 0 }
Here's a strategy that works pretty well, looks nice, and has pretty clean transitions
.spoiler {
position: relative;
display: inline-block;
cursor: help;
}
.spoiler::before {
content: 'psst\02026'; /* … */
position: absolute;
left: -2px;
top: -2px;
right: -2px;
bottom: -2px;
border-radius: 1px;
font-size: .9rem;
color: #e6578c;
background: #ffe5e5;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
opacity: 1;
transition: opacity 0.7s ease, transform 0.3s ease; /* hide faster than reveal */
}
.spoiler:hover::before {
opacity: 0;
transform: translateY(-50%)rotateX(80deg);
transition: opacity 1.0s ease, transform 0.5s ease; /* slower reveal */
}
If you style the parent block with opacity: 0 without hover, then you can't add any styles to illustrate what part of the page the user should be hovering over.
Instead, if we add a ::before element that covers up the child content, then we can fade it out on hover and still provide a visual indication of where to go.
Demo in Stack Snippets
.spoiler {
position: relative;
display: inline-block;
cursor: help;
}
.spoiler::before {
content: 'psst\02026'; /* … */
position: absolute;
left: -2px;
top: -2px;
right: -2px;
bottom: -2px;
border-radius: 1px;
font-size: .9rem;
color: #e6578c;
background: #ffe5e5;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.7s ease, transform 0.3s ease; /* hide faster than reveal */
}
.spoiler:hover::before {
opacity: 0;
transform: translateY(-50%)rotateX(80deg);
transition: opacity 1.0s ease, transform 0.5s ease; /* slower reveal */
}
/* demo styles */
blockquote {
margin: 0
}
<p>
Inline Spoiler <span class="spoiler" > Word </span>
</p>
<p class="spoiler">
Paragraph Text Block of a Spoiler
</p>
<blockquote class="spoiler">
Block quote spoiler with super long text that wraps and wraps and wraps some more.
Block quote spoiler with super long text that wraps and wraps and wraps some more.
Block quote spoiler with super long text that wraps and wraps and wraps some more.
</blockquote>
I want to apply opacity: 1; to a Paragraph when hovering over itself (I have figured that out) and when I hover the header above it.
This is my CSS
.testH {
font-family: impact;
text-align: center;
font-size: 50px;
transition: all 1s;
}
.testP {
text-align: center;
opacity: 0.5;
font-size: 18px;
transition: all 1s;
}
#testHdiv:hover {
opacity: 1;
}
.testP:hover {
opacity: 1;
}
My HTML
<div id="testHdiv"><h1 class="testH"><b>< ></b></h1>
<p class="testP">Text and text, more text<br>Bla bla bla bla</p>
</div>
So, as you can see I try to get the opacity from the paragraphs current 0.5, to 1 when hovering the Div - my idea is: being able to hover a "box"/the div, and the text becomming less transparent. Though I think the opacity on the hover of the Div does not Work as the div is defined a Div, not text, and therefor can't be transparent?
I have been struggling with this for a while now. But I am basically wanting something like this: http://demo.web3canvas.com/themeforest/flathost/onepage/index.html#testimonials, where you hover within range of the text and it is being zoomed - in this case, just with opacity.
You can set a class to the <p> or just, use an operator to set the :hover to paragraph.
Example:
#testHdiv:hover > p {
opacity: 1;
}
http://jsfiddle.net/g97pusex/1/
Just change this:
#testHdiv:hover {
opacity: 1;
}
To be like that:
#testHdiv:hover p{
opacity: 1;
}
You'll want to apply the opacity to the p element, not the div. According to your provided style, you can change it to this:
.testH {
font-family: impact;
text-align: center;
font-size: 50px;
transition: all 1s;
}
.testP {
text-align: center;
opacity: 0.5;
font-size: 18px;
transition: all 1s;
}
#testHdiv:hover .testH {
opacity: 1;
}
#testHdiv:hover .testP {
opacity: 1;
}
Notice how the :hover selector is applied to the div, but the style is applied to the p element .testP
If you are trying to hover the div and on hover it affect the paragraph opacity change your CSS to:
#testHdiv:hover .testP{
opacity: 1;
}
I have a large div with a small image inside of it. I want to make the image fade when I hover over the div, even when the mouse isn't directly over the image itself.
The div is much bigger than the image, so I'm not going to add transparency around the image or change the image size or anything like that.
I just want it to fade when the mouse hovers over the div it's in.
Here's the code I have so far, but it won't be useful:
<div id="left">
<img id="logoLeft" src="http://i.imgur.com/CJ7el5l.png" />
</div>
CSS
#left {
background-color: #f0f0ee;
float: left;
width: 50%;
min-height: 100%;
}
#logoLeft {
float: right;
margin-top: 2.5em;
}
I'd suggest:
#left:hover #logoLeft {
opacity: 0.4;
}
If you'd like a gradual fading:
#logoLeft {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
#left:hover #logoLeft {
opacity: 0.4;
transition: opacity 0.3s ease-in-out;
}
The below code would work if image.jpg is the regular image and faded.jpg contains a faded version of image.jpg that you photoshop.
<img src='image.jpg' onmouseover="this.src='faded.jpg';" onmouseout="this.src='image.jpg';">
You can do this one of two ways.
Use the general child selector: #left:hover #logoLeft which just says anything that is a child of #left:hover with an id of #left should have these rules applied.
User the direct descendant selector #left:hover > #logoLeft which says that any immediate child of #left:hover with id #left should have these rules applied.
Here is a more detailed description from Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
Also, the :hover sudo selector is what you would use for the mouse over property. MDN article: https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
NOTE: Some older (outdated) versions of Internet Explorer only support the :hover sudo selector on anchor tags.
For the fading I'm guessing you just want to change the opacity of the image. To have full cross browser support I would recommend this page: http://css-tricks.com/snippets/css/cross-browser-opacity/
Which says the following:
.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
}
Here is a working jsfiddle
Here is the Jquery Solution of this :
Css Part :
#left{
background-color: #f0f0ee;
float: left;
border:1px solid black;
width: 50%;
min-height: 100%;
}
#logoLeft {
float:right;
}
.fadeOut{
opacity:0;
transition: opacity 1s ease-in-out;
}
Js Part :
<script type="text/javascript">
$(document).ready(function(){
$("#left").on({
"mouseover" : function() {
$("#logoLeft").addClass("fadeOut");
},
"mouseout" : function() {
$("#logoLeft").removeClass("fadeOut");
}
});
});
</script>
HtML part:
<div id="left">
<img id="logoLeft" src="http://i.imgur.com/CJ7el5l.png" />
</div>
Here is the working example : http://jsbin.com/tijobudo/1/edit