Develop Reference

HTML/CSS/JS: How to Disable CSS Hover with Clicking? And Enable Again?

Sorry for poor English, it is not my first language.
I have made a toggle button which shows specific information by clicking it(javascript here).
This button has CSS:hover and I want to disable it when I click the toggle button.
And CSS:hover function needs to be back when user hovers the button again.
Is there any way to disable CSS:hover functionally?
Please let me know if you need more info to it.
Current Javascript
let logStyle = document.getElementById("log").style;
let levelStyle = document.getElementById("level").style;
let log = document.getElementById("log");
let level = document.getElementById("level");
odium.addEventListener("mouseover", function (event) {
logStyle.display = "block";
logStyle.animation = "fadein .3s";
levelStyle.display = "block";
levelStyle.animation = "fadein .3s";
}, false);
odium.addEventListener("mouseout", function (event) {
logStyle.display = "none";
levelStyle.display = "none";
}, false);
odium.addEventListener("click", function (event) {
log.classList.toggle('active');
level.classList.toggle('active');
}, false);
Toggle button CSS
#header nav img:hover {
transform: scale(1.2);
}
}
#log.active{
display: flex !important;
animation: fadein .3s !important;
}
Current HTML
<header id="header">
<nav>
<ul>
<li>
<img id="symbol1" src="assets/css/images/symbol-odium.png" style="cursor: pointer;"/><span
id="level"
></span>
</li>
</ul>
</nav>
<p id="nowValue" class="nowValue"></p>
<div id="log" class="log">
<ul>
<li></li>
<li>230104</li>
</ul>
</div>
</header>

It took me a while to understand what you need: a two- or tri-state action button.
hover: grow to look elevated
active: shrink to original elevation
focus: [OPTIONAL] shrink to look pressed elevation
Option 3) has only real effect when the element is a <button> or an <input type="button">. In general: an element that can receive focus, where buttons seem the most logical choice.
The snippet shows some simplified code of how it's done, with a bit more subtle action:
.button_img { cursor: pointer }
.button_img:hover { transform: scale(1.03) }
.button_img:active:not(:focus) { transform: scale(1) }
.button_img:focus { transform: scale(0.98) }
<img class="button_img" src="https://picsum.photos/74?random">

On array of nav elements, onmouseenter rotate element (like a wheel) and onmouseleave the wheel stops?

I hope the way I've explained it in the question makes sense. Basically I have a fullPage.js nav on the left hand side made up of circles with wheels as background images. I want each nav link to spin/rotate onmouseenter and stop in it's tracks onmouseleave. But I don't want the animation to reset to it's initial state hence why I'm using JS otherwise I would use css animations.
In an ideal world I would also want the link to the current or 'active' section spin continuously and stop where it was (not reset) if another nav link is clicked and the clicked link to start. But I have been on this for a couple of days and will settle for just the basic onmouseenter and onmouseleave functionality at this point which is why you won't see any 'active' element defined in the code below.
Currently I'm just getting the wheel jumping in rotation and not rotating continuously.
Rotating code borrowed from answer here: rotating a div element onmouseenter and stop rotation onmouseleave
Thank you!!!
const fullPageNav = document.getElementById('fp-nav');
const fullPageNavLinks = fullPageNav.getElementsByTagName("a");
const fullPageNavLinksArray = Array.prototype.slice.call(fullPageNavLinks);
let x = 0;
let y;
function start() {
y = setInterval(rotate, 25);
}
function stop() {
clearInterval(y);
}
for (let i = 0; i < fullPageNavLinksArray.length; i++) {
fullPageNavLinksArray[i].addEventListener('mouseenter', start, false);
fullPageNavLinksArray[i].addEventListener('mouseleave', stop, false);
}
function rotate() {
for (let i = 0; i < fullPageNavLinksArray.length; i++) {
fullPageNavLinksArray[i].addEventListener('mouseenter', function() {
fullPageNavLinksArray[i].style.transform = 'rotate(' + (++x % 360) + 'deg)';
fullPageNavLinksArray[i].style.transition = 'none';
});
}
}
<div id="fp-nav" class="fp-left fp-show-active">
<ul>
<li>
<a href="#" class="active spinme" transition: none 0s ease 0s;">
<span class="fp-sr-only">Section%201</span>
<span></span>
</a>
</li>
<li>
<a href="#" class="spinme" transition: none 0s ease 0s;">
<span class="fp-sr-only">Section%202</span>
<span></span>
</a>
</li>
<li>
<a href="#" class="spinme" transition: none 0s ease 0s;">
<span class="fp-sr-only">Section%203</span>
<span></span>
</a>
</li>
</ul>
</div>

Thank you to #CBroe for the easier answer. Use animation-play-state/animationPlayState instead of trying to be clever with setInterval.
const fullPageNav = document.getElementById('fp-nav');
const fullPageNavLinks = fullPageNav.getElementsByTagName("a");
const fullPageNavLinksArray = Array.prototype.slice.call(fullPageNavLinks);
fullPageNavLinksArray.forEach(fpnla => {
fpnla.addEventListener('mouseenter', function() {
fpnla.classList.add('hovering');
});
fpnla.addEventListener('mouseleave', function() {
fpnla.classList.remove('hovering');
});
});
#keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#fp-nav ul li a {
animation: spin 1s linear infinite;
animation-play-state: paused;
}
#fp-nav ul li a.active {
animation-play-state: running!important;
}
#fp-nav ul li a.hovering {
animation-play-state: running!important;
}

How can i make div content appear with animation when clicking a button that injects HTML?

I am currently learning on my own some CSS & JS and i'm stuck on a part i really want to work on but have trouble finding the right answers online as there seem to be a tons of methods yet i couldn't make any of them work.
Here is a snippet of what i have in mind :
let htmlcontent = `<p>It's me again!</p>`;
function animation() {
let content = document.getElementById("content");
content.innerHTML = "";
content.innerHTML = htmlcontent;
}
#content p {
font-size: 100px;
}
<div id="content">
<p>
Hello world!
</p>
</div>
<button onclick="animation()">
Click here
</button>
The idea is that when i click on the button, old content gets replaced by new HTML content and i want that new content to fade in from the right (a transition) every time i click the button.
I'm sorry if my question is bad/weird, english isn't my primary language and i have no one else to ask at the moment. Thank you for your patience.

You could just make a CSS animation and play that whenever you click the button.
let htmlcontent = `<p>It's me again!</p>`;
let content = document.getElementById("content");
function animation() {
content.innerHTML = htmlcontent;
content.classList.add("animate");
setTimeout(function() {
content.classList.remove("animate");
}, 500); // 500 is the same time as the CSS animation
}
#content p {
font-size: 100px;
}
.animate {
animation: fadeIn 500ms ease-out backwards;
}
#keyframes fadeIn {
from {
transform: translateX(250px);
opacity: 0;
}
to {
transform: translateX(0px);
opacity: 1;
}
}
<div id="content">
<p>
Hello world!
</p>
</div>
<button onclick="animation()">
Click here
</button>

To trigger a CSS transition, change the CSS state after you inserted the HTML. You can do this by changing a class (on the container or an inserted element).
Also see here:
Is it possible to animate a change to innerHTML using CSS only?

Gradually fade buttons only if they aren't currently being hovered over

I have forward and backward buttons for an image gallery. Currently, they fade away when the mouse is idle. Any movement on the page will show them again. Here's the code:
//fade out previous/next buttons on mouse idle
var timer;
$(document).mousemove(function() {
if (timer) {
clearTimeout(timer);
timer = 0;
}
$('.fader').fadeIn();
timer = setTimeout(function() {
$('.fader').fadeOut(1500)
}, 1000)
})
This works fine, but I also would like the buttons to not fade out at all if they are currently being hovered.
As a test, I've tried this code:
//both buttons are stored in class .fader
//when buttons are hovered over
$(".fader").hover(
function(){
//give them this class
$(this).toggleClass('is-hover');
})
//if buttons have .is-hover class, print test statement to console
if($(".fader").hasClass('is-hover')){
console.log("true");
}
I'm hoping to see the test "true" statement printed to the console, but it's not happening.
Ultimately, I'd like to wrap the first function in the second. If buttons are not being hovered over, then perform this timed fadeout of buttons.
Here is where the buttons are in the HTML:
<!-- Swiper -->
<div ng-show="show" class="swiper-container">
<div class="swiper-wrapper"></div>
<div class="swiper-pagination"></div>
<!--The buttons-->
<div class="swiper-button-next fader"></div>
<div class="swiper-button-prev fader"></div>
</div>

You can use CSS for the button hovering...
But to track mouse movement on the document, a script is needed.
You can use both! ;)
// To track mouse movement and fadein all buttons
var timer;
$(document).on("mousemove",function(){
$(".fader").addClass("faderShowOnMouseMove");
if(typeof(timer)!="undefined"){
clearTimeout(timer);
}
timer = setTimeout(function(){
$(".fader").removeClass("faderShowOnMouseMove");
},1000);
});
/* Base style for buttons */
.fader {
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
/* For single button hovering */
.fader:hover {
opacity: 1;
}
/* Used with JS mouse movement */
.faderShowOnMouseMove{
opacity: 1;
}
/* Just for this demo ;) */
.swiper-pagination{
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Swiper -->
<div ng-show="show" class="swiper-container">
<div class="swiper-wrapper">
Hover over here! <i>(right below this text)</i><br>
<div class="swiper-pagination">
<!--The buttons-->
<button class="fader">1</button>
<button class="fader">2</button>
<button class="fader">3</button>
</div>
</div>
</div>

How to prevent button from appearing hovered

(Please see this link to jsfiddle -
http://jsfiddle.net/AshThomas/742tvhqy/1/)
Hi there,
If this code runs on a computer... when the menu button is clicked, the button still appears 'hovered' until the cursor is moved (i.e. if you click the button and don't move the cursor, the button still appears 'hovered')
Also, if this code is run on the Samsung Galaxy S3 Mini's standard internet browser (this could be the same for other android phones), the menu opens and then closes instantly, even though the menu button is only pressed once.
I believe these two occurrences are linked but I cannot seem to find a solution.
Basically, I am looking to stop the menu button from appearing 'hovered' once the button is clicked (and without having to move the cursor) and I would like the menu to stay open when the menu button is pressed on the phone mentioned above... hopefully these two problems are related!
<body>
<div id="menu" class="panel" role="navigation" style="overflow-y: scroll; position: fixed;
top: 0px; bottom: 0px; width: 15.625em; height: 100%; -webkit-transition: right 300ms ease;
transition: right 300ms ease; right: -15.625em; -webkit-overflow-scrolling: touch;">
<div id="menuWrapper">
<ul>
<li class="boldMenu">Home
</li>
<li class="boldMenu">About
</li>
<li class="boldMenu">Contact
</li>
</ul>
</div>
</div>
<div class="wrap push" style="right: 0px; -webkit-transition: right 300ms ease; transition: right 300ms ease;">
☰
</div>

I've fixed your issue. I guess it's a bug of browser, because it's not re-rendering DOM elements after animation.
http://jsfiddle.net/742tvhqy/4/
Check out line #104
menuLink.on('click.bigSlide', function(e) {
e.preventDefault();
if (menu._state === 'closed') {
menu.open();
} else {
menu.close();
}
menuLink.fadeOut(5).fadeIn(10);
});
You see that last line with fadeOut/fadeIn? That's the fix. I've tried with hide().show(); but it's not working, even if i use fadeOut(1) it's not working :) But common, 5ms is same as 1ms. I can't think any better solution right now. It works.
BTW. In your place I would just do all this stuff with few lines of jQuery code instead of all that fancy css animation stuff..

maybe do this... add another class to the button and give the class the hovered properties in css...
menu-link-class:hover {...}
then do this in your js
$('.menu-link').click(function() {
var me = $(this);
me.removeClass('menu-link-class');
setTimeout(function() {
me.addClass('menu-link-class');
},1);
});
UPDATE:
Special thanks to #Lukas Liesis
you have 2 choises :)
menuLink.on('click.bigSlide', function(e) {
e.preventDefault();
if (menu._state === 'closed') {
menu.open();
} else {
menu.close();
}
menuLink.fadeOut(5).fadeIn(10);
});
or
menuLink.on('click.bigSlide', function(e) {
e.preventDefault();
if (menu._state === 'closed') {
menu.open();
} else {
menu.close();
}
menuLink.removeClass('menu-link-class');
setTimeout(function() {
menuLink.addClass('menu-link-class');
},1);
});