I am trying learning basics of HTML/CSS. I learned about :hover in css, that when the cursor is hover the element, something happend according to the code written. Then, you can also use transition tag, to make the transformation take some time. But, when the cursor goes out of the element, it comes back to the original position, without making the transition, and that is horrible. Here is the code I wrote
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.required::before {
content: '';
display:block;
width: 10px;
height: 10px;
background-color: red;
border-radius:10px;
}
.required::after {
content: '';
display:inline-block;
width: 10px;
height: 10px;
background: blue;
margin-left: -20px;
}
.required:hover::after{
transform: translateX(100px);
transition: 1s;
}
</style>
</head>
<body>
<label class = required>Name</label>
</body>
</html>
When cursor hover, the cube moves, in a rime of 1s. Mouse out, it instantly returns in his first position. I would like that it returns in the position in the same amount of type. Hope I'm enought clear in my description. Thanks for your help
Put transition in .required::after because putting transition here make the hover effect to take a fix amount of time for start/end of effect while putting it in :hover make its start time as fix value while it don't specify its end time.
If want to apply transition on fix property use that property name before time in transition like here you can write transition: transform 1s; so transition will be applied on transform property value
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.required::before {
content: '';
display: block;
width: 10px;
height: 10px;
background-color: red;
border-radius: 10px;
}
.required::after {
content: '';
display: inline-block;
width: 10px;
height: 10px;
background: blue;
margin-left: -20px;
transition: 1s;/*Put transition here*/
}
.required:hover::after {
transform: translateX(100px);
}
</style>
</head>
<body>
<label class="required">Name</label>
</body>
</html>
In addition to previous answers, which correctly tells you to move the transition property to .required::after, you also need to be careful using transform: 1s without property names. By default this will create transitions for ALL properties.
The problem is that the transition is set only for the pseudo element when the user is hovering so as soon as the hover stops the transition property goes back to the default - i.e. no transition.
Moving that transition setting into the non-hovered class setting means it is there whether hovering is takng place or not so the return will also transition.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.required::before {
content: '';
display: block;
width: 10px;
height: 10px;
background-color: red;
border-radius: 10px;
}
.required::after {
content: '';
display: inline-block;
width: 10px;
height: 10px;
background: blue;
margin-left: -20px;
transition: 1s;
}
.required:hover::after {
transform: translateX(100px);
}
</style>
</head>
<body>
<label class=r equired>Name</label>
</body>
</html>
I want to achieve this:
What I already achieve:https://plnkr.co/edit/a3XfJo6Fxtru9V5zpVYR?p=preview
.dropdown-menu { //container
overflow-y: overlay;
background-color: transparent;
}
.dropdown-menu::-webkit-scrollbar {
width:10px;
}
.dropdown-menu::-webkit-scrollbar * {
background:transparent;
}
.dropdown-menu::-webkit-scrollbar-thumb {
background:$blue !important;
border-radius: 6px;
}
Does someone have any ideas how I can do that? How can I make the items stay between their container and the container's scrollbar so they looks like the design?
I tried putting z-index in the elements but seems not to work.
Just switch the unit in body tag from % to vw
and you will get the over content effect.
body {
width: 100vw;
overflow-x: hidden;
}
body::-webkit-scrollbar {
width: 0.7em;
background: transparent;
}
body::-webkit-scrollbar-thumb {
background: #c0392b;
}
http://manos.malihu.gr/jquery-custom-content-scroller/
This plugin works pretty well. Suggested! Easy to modify as well!
Make some changes in your css file use this code
.dropdown-menu::-webkit-scrollbar-track {
background-color: #E0E0E0;
}
remember to remove display: none; property from your code or change it to display: block;
I'm trying to get a line to animate left to right underneath the hovered link in a list. Right now, nothing happens when hovered.
https://jsfiddle.net/60vufuv5/1/
This is an example of getting it to work on just a single link but I didn't have any luck in the fiddle above: https://jsfiddle.net/4bgkcoaq/
<nav class="contact-nav">
<ul>
<li><span class="name_2">xxx#gmail.com<div class="slider"></div></span></li>
<li>+1-347-419-7751</li>
</ul>
</nav>
li name_2:hover > .slider {
width: 100%;
}
You need to set an initial width of 0 and also a transparent bottom border on your element. Then on hover, expand that width to 100% and give the bottom border a color.
Something like:
.name_2 {
display: inline-block;
transition: all 2s ease-in-out;
border-bottom: 2px solid transparent;
position: relative;
margin: 0 auto;
width: 0%;
}
.name_2:hover{
border-bottom: 2px solid black;
width: 100%;
}
Updated fiddle
this may help you.this is an alternative way using html, css with four lines of jquery.just copy and try this.
<html>
<head>
<title>Welcome !</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
.myclass{
width: 100px;
height: 100px;
background-color: orange;
position: absolute;
}
</style>
</head>
<body>
<div class="myclass">
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".myclass").mouseenter(function(){
$(this).animate({left:400});
});
});
</script>
</body>
</html>
Now use this code (and many variations of this), but scroll track get dark-grey color, something like #222222 or near this. Find many examples, but all of them give same result. Opera, Chrome and Firefox show this bug. How to fix?
#style-3::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: transparent;
}
#style-3::-webkit-scrollbar {
width: 6px;
background-color: transparent;
}
#style-3::-webkit-scrollbar-thumb {
background-color: #000000;
}
Edit:
The solution that I gave with overflow: overlay still works in browsers like Google Chrome and you can still see my answer below. However, overflow: overlay was marked depreciated.
Whether an alternative solution exists, is unknown, but the one mentioned below still works for Google Chrome.
From what I understood from https://github.com/w3c/csswg-drafts, is that the alternative was ment to be scrollbar-gutter. But there's actually nothing pointing towards an alternative solution, except people saying that there would be.
The documention of scrollbar-gutter says, that the user agent is able to control whether it shows classic or overlay scrollbars. And the people at the csswg-drafts say that the people that would implement such a feature, don't seem to be interested into it.
If we want an alternative solution, then we have to tell them, here: https://github.com/w3c/csswg-drafts/issues/7716
I can't suggest this alone, they need more people that would be interested in having a "feature" to let the website author control whether a classic or a overlay scrollbar should be used.
Regarding Google Chrome's overlay scrollbars. They've made an experiment that allows the user to enable it at chrome://flags/ and then searching for "Overlay Scrollbars".
Answer:
If you use this for "body":
body {
overflow: overlay;
}
The scrollbar will then also take transparent backgrounds across the page.
This will also put the scrollbar inside the page instead of removing some of the width to put in the scrollbar.
Here is a demo code. I wasn't able to put it inside any of the codepen or jsfiddle, apparently it took me a while until I figured out, but they don't show the transparency, and I don't know why.
But putting this in a HTML file should go fine.
Was able to put it on fiddle: https://jsfiddle.net/3awLgj5v/
<!DOCTYPE html>
<html>
<style>
html, body {
margin: 0;
padding: 0;
}
body {
overflow: overlay;
}
.div1 {
background: grey;
margin-top: 200px;
margin-bottom: 20px;
height: 20px;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: rgba(90, 90, 90);
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
}
</style>
<body>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
</body>
</html>
Best way to test it is to create a local html file, I guess.
You can also apply that on other elements, such as any scrolling box. While using inspector mode, it could be that you have to put the overflow to hidden and then back to anything else. It probably needed to refresh. After that it should be possible working on scrollbar without having to refresh it again. Just note that was for the inspector mode.
With pure css it is not possible to make it transparent. You have to use transparent background image like this:
::-webkit-scrollbar-track-piece:start {
background: transparent url('images/backgrounds/scrollbar.png') repeat-y !important;
}
::-webkit-scrollbar-track-piece:end {
background: transparent url('images/backgrounds/scrollbar.png') repeat-y !important;
}
.scrollable-content {
overflow-x:hidden;
overflow-y:scroll; // manage scrollbar content overflow settings
}
.scrollable-content::-webkit-scrollbar {
width:30px; // manage scrollbar width here
}
.scrollable-content::-webkit-scrollbar * {
background:transparent; // manage scrollbar background color here
}
.scrollable-content::-webkit-scrollbar-thumb {
background:rgba(255,0,0,0.1) !important; // manage scrollbar thumb background color here
}
Embed this code in your css.
::-webkit-scrollbar {
width: 0px;
}
/* Track */
::-webkit-scrollbar-track {
-webkit-box-shadow: none;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: white;
-webkit-box-shadow: none;
}
::-webkit-scrollbar-thumb:window-inactive {
background: none;
}
Only this code worked for me tho -
<!DOCTYPE html>
<html>
<style>
body {
overflow: overlay;
}
::-webkit-scrollbar {
width: 10px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background: white;
border-radius: 2px;
}
</style>
<body>
..Your code here
</body>
</html>
The standard way to do this (which currently only works in Firefox) is:
:root {
scrollbar-color: transparent transparent;
}
Just set display:none; as an attribute in your stylesheet ;)
It's way better than loading pictures for nothing.
body::-webkit-scrollbar {
width: 9px;
height: 9px;
}
body::-webkit-scrollbar-button:start:decrement,
body::-webkit-scrollbar-button:end:increment {
display: block;
height: 0;
background-color: transparent;
}
body::-webkit-scrollbar-track-piece {
background-color: #ffffff;
opacity: 0.2;
/* Here */
display: none;
-webkit-border-radius: 0;
-webkit-border-bottom-right-radius: 14px;
-webkit-border-bottom-left-radius: 14px;
}
body::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #333333;
-webkit-border-radius: 8px;
}
Try this one, it works fine for me.
In CSS:
::-webkit-scrollbar
{
width: 0px;
}
::-webkit-scrollbar-track-piece
{
background-color: transparent;
-webkit-border-radius: 6px;
}
and here is the working demo:
https://jsfiddle.net/qpvnecz5/
To control the background-color of the scrollbar, you need to target the primary element, instead of -track.
::-webkit-scrollbar {
background-color: blue;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
I haven't succeeded in rendering it transparent, but I did manage to set its color.
Since this is limited to webkit, it is still preferable to use JS with a polyfill:
CSS customized scroll bar in div
if you don't have any content with 100% width, you can set the background color of the track to the same color of the body's background
It might be too late, but still. For those who have not been helped by any method I suggest making custom scrollbar bar in pure javascript.
For a start, disable the standard scrollbar in style.css
::-webkit-scrollbar{
width: 0;
}
Now let's create the scrollbar container and the scrollbar itself
<!DOCTYPE HTML>
<html lang="ru">
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
...meta
</head>
<body id="body">
<div class="custom_scroll">
<div id="scroll_block" class="scroll_block"></div>
</div>
...content
<script src="main.js"></script>
<script>customScroll();</script>
</body>
</html>
at the same time, we will connect the customScroll() function, and create it in the file main.js
function customScroll() {
let scrollBlock = document.getElementById("scroll_block");
let body = document.getElementById("body");
let screenSize = screen.height - scrollBlock.offsetHeight;
document.addEventListener("scroll", () => {
scrollBlock.style.top = (window.pageYOffset / body.offsetHeight * (screenSize + (screenSize * (body.offsetHeight - (body.offsetHeight - screen.height)) / (body.offsetHeight - screen.height)) )) + "px";
});
setScroll(scrollBlock, body);
}
function setScroll(scrollBlock, body) {
let newPos = 0, lastPos = 0;
scrollBlock.onmousedown = onScrollSet;
scrollBlock.onselectstart = () => {return false;};
function onScrollSet(e) {
e = e || window.event;
lastPos = e.clientY;
document.onmouseup = stopScroll;
document.onmousemove = moveScroll;
return false;
}
function moveScroll(e) {
e = e || window.event;
newPos = lastPos - e.clientY;
lastPos = e.clientY;
if(scrollBlock.offsetTop - newPos >= 0 && scrollBlock.offsetTop - newPos <= Math.ceil(screen.height - scrollBlock.offsetHeight)) {
window.scrollBy(0, -newPos / screen.height * body.offsetHeight);
}
}
function stopScroll() {
document.onmouseup = null;
document.onmousemove = null;
}
}
adding styles for the scrollbar
.custom_scroll{
width: 0.5vw;
height: 100%;
position: fixed;
right: 0;
z-index: 100;
}
.scroll_block{
width: 0.5vw;
height: 20vh;
background-color: #ffffff;
z-index: 101;
position: absolute;
border-radius: 4px;
}
Done!
I was able to get a transparent background, and transparent scroll bar like this:
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar {
width: 12px;
background-color: rgba(0, 0, 0, 0);
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: rgba(33, 37, 41, 0.45); // change 0.45 to 0 to make it invisible
}
Also you can add this to your body element, to display your scroll bar above the website content:
overflow: overlay;
Just been playing about with pointer-events property in CSS.
I have a div that I want to be invisible to all mouse events, except for :hover.
So all click commands go through the div to the one below it, but the div can report whether the mouse is above it or not still.
Can anyone tell me if this can be done?
HTML:
<div class="layer" style="z-index:20; pointer-events:none;">Top layer</div>
<div class="layer" style="z-index:10;">Bottom layer</div>
CSS:
.layer {
position:absolute;
top:0px;
left:0px;
height:400px;
width:400px;
}
Hover only. It is very easy. No JS... Prevent link default action too.
a:hover {
color: red;
}
a:active {
pointer-events: none;
}
Link here
Edit:
supported in IE 11 and above
http://caniuse.com/#search=pointer-events
"Stealing" Xanco's answer but without that ugly, ugly jQuery.
Snippet: Notice DIVs are in reverse order
.layer {
position: absolute;
top: 0px;
left: 0px;
height: 400px;
width: 400px;
}
#bottomlayer {
z-index: 10
}
#toplayer {
z-index: 20;
pointer-events: none;
background-color: white;
display: none
}
#bottomlayer:hover~#toplayer {
display: block
}
<div id="bottomlayer" class="layer">Bottom layer</div>
<div id="toplayer" class="layer">Top layer</div>
I don't think it's possible to achieve your aims in CSS alone. However, as other contributors have mentioned, it's easy enough to do in JQuery. Here's how I've done it:
HTML
<div
id="toplayer"
class="layer"
style="
z-index: 20;
pointer-events: none;
background-color: white;
display: none;
"
>
Top layer
</div>
<div id="bottomlayer" class="layer" style="z-index: 10">Bottom layer</div>
CSS (unchanged)
.layer {
position:absolute;
top:0px;
left:0px;
height:400px;
width:400px;
}
JQuery
$(document).ready(function(){
$("#bottomlayer").hover(
function() {
$("#toplayer").css("display", "block");
},
function() {
$("#toplayer").css("display", "none");
}
);
});
Here's the JSFiddle: http://www.jsfiddle.net/ReZ9M
You can also detect hover on different element and apply styles to it's child, or using other css selectors like adjacent children, etc.
It depends on your case though.
On parent element hover. I did this:
.child {
pointer-events: none;
background-color: white;
}
.parent:hover > .child {
background-color: black;
}
Pure CSS solution to your request (the opacity property is there just to illustrate the need for the transitions):
.hoverOnly:hover {
pointer-events: none;
opacity: 0.1;
transition-delay: 0s;
}
.hoverOnly {
transition: ,5s all;
opacity: 0.75;
transition-delay: 2s;
}
What it does:
When the mouse enters the box, it triggers the :hover state. However, in that state, the pointer-events are disabled.
But if you do not set the transitions timers, the div will cancel the hover state when the mouse moves; the hover state will flicker while the mouse is moving inside the element. You can perceive this by using the code above with the opacity properties.
Setting a delay to the transition out of the hover state fixes it. The 2s value can be tweaked to suit your needs.
Credits to transitions tweak: patad on this answer.
Just pure css, doesn't need jquery:
div:hover {pointer-events: none}
div {pointer-events: auto}
I use the :hover pseudo-element of an equal-sized parent/container to simulate a hover over my overlay div, then set the overlay's pointer-events to none to pass through clicks to elements below.
let button = document.getElementById('woohoo-button');
button.onclick = () => console.log('woohoo!');
let overlay = document.getElementById('overlay');
overlay.onclick = () => console.log(`Better change my pointer-events property back to 'none'`);
#container {
display: flex;
align-items: center;
justify-content: center;
position: relative;
background-color: green;
width: 300px;
height: 300px;
}
#overlay {
background-color: black;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
/* Pass through clicks */
pointer-events: none;
}
/*
Set overlay hover style based on
:hover pseudo-element of its
container
*/
#container:hover #overlay {
opacity: 0.5;
}
#woohoo-button {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
}
<div id="container">
<div id="overlay"></div>
<button id="woohoo-button">
Click Me
</button>
</div>