I have a dropdown menu that works by Classic CSS hover
if you've opened the menu with a click event, i need the hover effect to be removed but i can't because you're still hovering over the menu the menu doesn't disappear until you hover off which isn't ideal. I also tried using .hide() but then that messes with CSS hover functionality.
Is there a way in jQuery to remove the CSS hover activation of an element?
$("ul.nav > li").click(function(e) {
var url = $(this).attr("url");
$(this).css('background', '#bbb');
if( url == 'logoutServlet') {
$.get('logoutServlet');
window.location = "/a";
}else{
$("#content").html('Loading...').load(url);
}
});
Hover state is not a class, you should use CSS to change hover behavior of an element.
for example:
a.whatever { color: black; } /* Default state */
a.whatever:hover { text-decoration: none; color: black; } /* Hover state */
You can match hover state rules with other states behavior to make it look the same.
Related
I am trying to make an active state on my link when clicked, which remains until another link is clicked. I'd like to have the class removed and transferred to the next link when clicked.
Currently it can be toggled on and off on each link.
// navbar toggle for active state
document.getElementById('navbar__list').addEventListener("click", function(event){
event.target.classList.toggle('funcElemStyle');
});
.funcElemStyle {
background: #333;
}
Instead of using javascript to achive this functionality, you can use CSS to achieve the same effect by using :active.
for example:
/* Selects the link element. */
a:active {
color: #4444AA;
}
you can also use :hover if you want effects when hovered. CSS also allows chaining so if you want an effect to apply when it is hovered over and active, you can use :active:hover
Instead of toggle use .add() and .remove() functions. Run snippet for an example.
document.querySelector("div").addEventListener("click", event=>{
event.target.classList.remove("red")
})
div{
width: 100px;
height: 100px;
background: green;
}
.red{
background: red;
}
<div class="red"></div>
I've seen a lot of post with almost the same problem as mine but it is not working for me.
I would like to remove the hover property of my button upon clicking the said button before the remove event I have.
Edit: I have 3 buttons for this.
Edi2: I found a workaround for this. I manually set the button color upon clicking the button
$('button').on('click', function() { // when you click the button
$(this).addClass('no-hover-button'); // add the class 'no-hover-button'
});
button:not(.no-hover-button):hover { /* only apply hover styling when the button does not have the class 'no-hover-button' */
color: red;
}
like in your case
.btn-group button:not(.no-hover-button):hover {
background-color: #FFF6C3;
border: 1px solid grey;
}
You can't change or alter the actual :hover selector through Javascript.However, you can add an another class (new) and remove that class(new) onClick.
So I have a navigation bar using standard Bootstrap 3 classes and structure, recently I wanted to see if you could open the drop down menus on hover.
I did some searching and found this snippet:
.dropdown:hover .dropdown-menu{
display: block;
}
This opens the menu on hover, which is great (without having to toggle .dropdown-toggle
My issue is that my .dropdown-toggle has a focus state, which only happens when focus is given to the element, so when I hover and the menu opens my hover state is never applied, as I do not have to click on the top menu item anymore.
So the question is: is there a way to force the :focus state when :hover is active?
I tried to do this:
.dropdown:hover #home .dropdown-toggle:focus{
background: #00aaff;
border: #00aaff 1px solid;
}
So basically on hover add styles to the focus, but I think what I actually need to do is add the :focus class on :hover so is this more a JavaScript thing?
$(".dropdown").hover(function(){
$('#home .dropdown-toggle').focus();
});
And in css
#home .dropdown-toggle:focus{
background: #00aaff;
border: #00aaff 1px solid;
}
when the focus is on, the css gets apply.
I see it as 'a JavaScript thing'. You can attach a 'mouseover' event to the menu, which, when triggered, will change the menu's CSS and the CSS of the .dropdown-toggle element.
I do not think it makes a lot of sense to trigger "focus" state for CSS modification if you are using JavaScript (in this particular example, I will use JQuery library).
A simple example: https://jsfiddle.net/matu2vd6/5/
HTML:
<div class='dropdown'>My dropdown element.</div>
<div class='dropdown-toggle'>My dropdown-toggle element.</div>
JS/JQUERY:
let dropDownEl = $(".dropdown");
let dropDownToggleEl = $(".dropdown-toggle");
dropDownEl.on("mouseover", function() {
dropDownToggleEl.css({"background": "#00aaff",
"border": "#00aaff 1px solid"});
});
dropDownEl.on("mouseout", function() {
dropDownToggleEl.css({"background": "transparent",
"border": "none"});
});
I'm dealing with bootstrap to style the navbar
Ok, i can style perfectly for desktop or mobile in his initial state.
The problem comes when i try to style on mobile in his expanded and collapsed state.
Here is a Codepen example, where you can see and example where i can touch the burguer and even the UL.
But, how can i change the logo color and the navbar background color ??
The others were easy because there got class via jQuery.
Hope someone can help me. ( Using CSS & JS ( with or without jQuery ) )
I try this but everything crashed
$('.navbar-toggle').toggle(function () {
$(".navbar-header").addClass("opened");
$("#burguer").addClass("opened");
}, function () {
$(".navbar-header").removeClass("opened");
$("#burguer").removeClass("opened");
});
You can use Bootstrap events on collapse:
JS:
$('#bs-example-navbar-collapse-1').on('show.bs.collapse', function () {
$('.navbar').addClass('mobile-opened');
$('.navbar-brand').addClass('mobile-opened');
});
$('#bs-example-navbar-collapse-1').on('hide.bs.collapse', function () {
$('.navbar').removeClass('mobile-opened');
$('.navbar-brand').removeClass('mobile-opened');
});
CSS:
.navbar.mobile-opened {
background: blue;
}
.navbar-brand.mobile-opened span {
color: red;
}
If you want to change colors when animation is done just use shown instead of show and hidden instead of hide
CODEPEN
ok, I have a tabbed page and on click of a tab, I am showing a particular section and highlighting this tab to red background. Now I want to use the hover effect and on hover the tab should highlight to red background. It works but then when I mouseleave from the clicked tab, the background effect goes away.
In short, How do I highlight the tab to red background on hover for this fiddle
Why not use some pure css for this:
#nav ul li:hover { background-color: red; }
Updated Fiddle
EDIT
If you're trying to do this with jQuery (as a learning experience), I would define a new css class called hoverRed
.hoverRed { background-color: red; }
then use the hover function:
$("#nav ul li").hover(function() {
$(this).addClass("hoverRed");
}, function() {
$(this).removeClass("hoverRed");
});
The first function gets called when the hover begins, the second gets called when the hover ends (and the mouse leaves)
updated fiddle
Use this:
#nav ul li:hover
{
background: red;
}
Update:
Here is the fiddle for your mouseenter and mouseleave events. Here is the code that I added.
CSS
.lihover{background: red;}
jQuery
$("li").mouseenter(function(){
$(this).addClass("lihover");
}).mouseleave(function(){
$(this).removeClass("lihover");
});