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");
});
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>
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"});
});
When I click a tab on my navbar it will go to the tab, but once I move the mouse away from it will no longer show that it's selected but it will keep it's text color.
Here is the full code:
Html: https://codetidy.com/8744/
CSS: https://codetidy.com/8745/
So that I can better explain my problem here is an example:
Loads the website
Hovers over the about tab to click it
Then after tab has been clicked mouse has moved away but the tab didn't stay red
Try adding a more specific CSS selector to your custom CSS:
.nav > li > a:focus, .nav > li > a:hover {
background-color: red;
}
Working example of your code (after adding the class above)
As what I can see on your html code, why do you have a onClick function for tabs. There is already a documentation for bootstrap tabs. You just need to clear up your css also to get the desired output. You can do something like this as css but it is much better if you put an id for you navbar.
default:
.nav > li {
//enter code here
}
hover:
.nav > li:hover {
//enter code here
}
selected:
.nav > li.active {
//enter code here
}
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.
A navigation menu I'm working on has a default CSS behavior (for those rare people who have JavaScript disabled). By default, the submenu is not displayed:
.main-navigation ul ul {
display:none;
}
On hover, the submenu is revealed:
.main-navigation ul li:hover > ul {
display:block;
}
For the JavaScript-minded majority, the menu is juiced up with the following jQuery snippet:
jQuery(document).ready(function($) {
/* cancel the default CSS hover behavior */
$('.main-navigation ul li').on('mouseover',function(){
$('.main-navigation ul li:hover > ul').css('display', 'none');
$(this).css('cursor', 'pointer');
});
/* toggle submenu display (if the submenu actually exists) */
$('.main-navigation ul li a').click(function() {
var li = $(this).closest('li');
if(li.has('ul')) li.find('ul').slideToggle(100);
});
});
This toggling works great, except it only works as long as the mouse cursor stays over the parent link. If the submenu is open, and the user happens to move the mouse away from the parent link, the submenu snaps shut.
Question: How do I keep the submenu open on mouse out, if it's been already open?
I tried adding something like this to my jQuery snippet:
$('.main-navigation ul li').on('mouseout',function(){
if ($('.main-navigation ul li ul').css('display') = 'none') {
$('.main-navigation ul li ul').css('display', 'none');
} else if ($('.main-navigation ul li ul').css('display') = 'block') {
$('.main-navigation ul li ul').css('display', 'block');
}
});
Not only it's mediocre coding, but it also actually doesn't work. ;-(
How should I fix this issue?
Thank you in advance for your suggestions!
i'm not sure the click issue yet (looking at it), but you don't need JavaScript to "disable" the CSS. Simply use <noscript> tags, like so:
<noscript>
<style type="text/css">
.exampleclass:hover { display: block; }
</style>
</noscript>
Or you could simply add a no-js class to you main menu element, then remove that class if JS is enabled at the very start of your JavaScript. Then write your "no-js css" to use .no-js + whatever children instead of the main class.
UPDATE
The problem is simple, when you use mouseover to cancel your "non-js" css, the menu is still being hidden everytime the user hovers over that submenu. In other words, you're not just removing the "no js" css, you're hiding it on every mouseover of .main-navigation ul li!
Simply follow something in my first suggestion, then remove the mouseover function completely and viola! problem solved!
I wrote a jsFiddle using your code to show how I might approach it.
jsFiddle
Code
$(function() {
// See in css where i changed `.main-navigation ul li:hover > ul` to `.main-navigation.no-js ul li:hover > ul`
// See Also in HTML where i added class `no-js` to `#site-navigation`
$(".no-js").removeClass("no-js");
$('.main-navigation ul li a').on("click", function(e) {
// first hide sibling sub-menus!
$(this).closest('li').siblings().each(function(i) { $(this).find("ul").slideUp("fast"); });
// no need for the if statement you had.
// jQuery is "smart", if it doesn't exist,
// then this function simply won't do anything!
$(this).closest('li').find('ul').slideToggle(100);
})
// and just to add a little for ya,
// the following will slideUp our submenu if user hovers away from MAIN MENU
.closest("ul").on("mouseleave", function(e) {
$(this).find("ul:visible").slideUp("slow");
});
})
Step-by-Step
Where you have manual script at between <script type="text/javascript"> tags, just before that noscript tage you threw in(which you can remove), replace all your JS with the following:
<script type="text/javascript">
jQuery(document).ready(function(jQuery) {
jQuery(".no-js").removeClass("no-js");
jQuery('.main-navigation ul li a').on("click", function(e) {
$(this).closest('li').siblings().each(function(i) { $(this).find("ul").slideUp("fast"); });
jQuery(this).closest('li').find('ul').slideToggle(100);
})
// If you find the menu hiding to fast, simply remove or comment out the next 3 lines
jQuery('.main-navigation ul').on("mouseleave", function(e) {
jQuery(this).find("ul:visible").slideUp("slow");
});
});
</script>
Remove the NOSCRIPT TAGS
In your CSS Code:
/* Find the area that was written as */
.main-navigation ul li:hover > ul {
display:block;
}
/* And replace it with the following */
.main-navigation.no-js ul li:hover > ul {
display:block;
}
Finally, look in your HTML, find the line written as <nav id="site-navigation" class="main-navigation" role="navigation"> and replace it with:
<nav id="site-navigation" class="main-navigation no-js" role="navigation">
so here is where IE did something neat, and jquery makes it browser agnostic so it's usable. mouseleave is 'mouseout' for the selected element and any of its subelements in IE, and jquery makes it work for the other browsers.
The mouseleave JavaScript event is proprietary to Internet Explorer.
Because of the event's general utility, jQuery simulates this event so
that it can be used regardless of browser. This event is sent to an
element when the mouse pointer leaves the element. Any HTML element
can receive this event.
mouseover - when someone mouses over the 'parent' ul li you want to show any sub uls
click - when someone clicks the parent ul li you want to hide or show any sub uls
mouseleave - IE specific that jquery makes browser agnostic for you.
leave the menus in a working state using <noscript> tags, and intend the javascript to go from there if it is available.
fiddle -- this fiddle is just to give you a start, as i didn't put in any of your css.
$(function () {
$("ul").on({"mouseover":function(event){
$(this).find("ul").show("slow");
}},"li.menu-item",null).on({"click":function(event){
$(this).find("ul").toggle("slow");
}},null,null).on({"mouseleave":function(event){
$(this).find("ul").hide("slow");
}},null,null);
});