Transform CSS { ul li:hover a } in JQUERY .hover - javascript

I want to now if there's a way to transform this css properties in a jquery .hover, or control this by javascript to change the colour dynamically.
CSS:
ul li:hover a {
color: #FFF;
}
Can anyone Help ?
EDIT:
My problem is:
I have a drop down menu and i want that when I hover the menu the text color change and when I hover the submenu the hover state stays for both.
JQuery:
$("ul li").hover(function () {
$(this).stop().animate({ backgroundColor: "white"}, 500);
}, function () {
$(this).stop().animate({ backgroundColor: "black"}, 400);
});
To animate background color on hover in menu and submenu.
For example if the text are black I want to make the text white on hover. For this I use:(Submenu example, for menu change the selector of course)
$('ul.submenu li a').hover(function () {
$(this).css({color:'#FFFFFF'});
}, function () {
$(this).css({color:'#00FF00'});
});
All This works fine, but when I hover the submenu the menu returns to the original state(because the mouseleave is activated on hover out). All I want is that when I hover submenu the hover state in menu stays active as well.
I've tried many things but all give me problems, only thing that works is css, but I need to control the text colours dynamically too.
HTML Structure:
<ul class="menu">
<li>text</li>
<li>text
<ul class="submenu">
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</li>
<li>text</li>
</ul>

Please let me know if this is along the right track of what you're asking.
I haven't got it working fully, but give this a look and see if it helps:
my JSFiddle
Here's the code so far:
$(document).ready(function() {
var sm; // submenu
var delay = 500; // delay before applying changes
var tID; // timeout id
var color_on = '#fff'
, color_off = '#000';
var oPrev;
$('ul.menu > li > a').hover(
function() {
if (tID && $(this) === oPrev) {clearTimeout(tID);}
oPrev = $(this);
sm = $(this).next('.submenu');
if(sm){sm.stop(true, true).fadeIn('slow');}
},
function() {
if (tID) {clearTimeout(tID);}
tID = setTimeout(
function() {
sm.stop(true, true).fadeOut('slow');
}, delay);
}
);
$('.submenu > li > a').hover(
function() {
if (tID) {clearTimeout(tID);}
oPrev.css('color',color_on);
$(this).stop(true, true).fadeIn('slow');
},
function() {
if (tID) {clearTimeout(tID);}
sm = $(this);
tID = setTimeout(
function() {
oPrev.css('color','');
sm.closest('ul').stop(true, true).fadeOut('slow');
}, delay);
}
);
});
And CSS:
a
{
color : #000;
text-decoration : none;
}
a:hover
{
color : #fff;
}
ul li
{
background : orange;
border : 1px solid black;
display : inline-block;
padding : 0 1em;
vertical-align : top;
}
.menu
{
background : #ccc;
border : 1px solid black;
display : inline-block;
padding : .25em 1em;
vertical-align : top;
}
.submenu
{
border : 1px solid black;
border-width : 1px 0 0 0;
display : none;
}
.submenu li
{
background : red;
border-width : 0;
}
.submenu li a:hover
{
color : #fff;
}
Note: I'm not saying this is the best answer, nor is it a complete solution, but maybe something in here will assist someone in finding the correct solution.

$("ul li a").hover(function() {
$(this)
.data("color", $(this).css("color"))
.css("color", "#FFF");
}, function() {
$(this).css("color", $(this).data("color"));
});
$("ul li").hover(function() {
$(this).find("a")
.data("color", $(this).css("color"))
.css("color", "#FFF");
}, function() {
$(this).find("a").css("color", $(this).data("color"));
});
Update:
Assuming that the first selector (ul li a:hover) is superfluous, we can simplify the code considerably:
$("li").hover(function() {
$(this).find("a").css("color", "#FFF");
}, function() {
$(this).find("a").removeAttr("style");
});
This updated code should work also (under the condition that you don't have additional CSS code inside the style attribute of the ANCHOR elements).
Update:
An alternative solution would be this:
$("li").hover(function() {
$(this).toggleClass("hover", $(this).is(":hover"));
});
with this CSS code:
ul li.hover a {
color: #FFF;
}
I highly recommend this alternative solution!

$('li').hover(
function(){
$(this).css({color:'white'}); //mouseover
},
function(){
$(this).css({color:'black'}); // mouseout
}
);

Try this (now tested: http://jsfiddle.net/nathan/J7HLV/):
$('ul li a, ul li').hover(function () {
$(this).add($(this).children('a')).filter('a').css('color','#fff');
},function () {
$(this).add($(this).children('a')).filter('a').css('color','');
});

Sure, simply use the hover binding.
$("ul li a").bind("hover", function () {
$(this).css("color", "#FFF");
});
$("ul li").bind("hover", function () {
$(this).children("a").css("color", "#FFF");
});
Note that this code won't reset the CSS properties when you mouse out. To do that you would need to store the original color values.
It is probably worth it to set that a element to display: block so it expands to the entire parent li element. Then you only need to hover on one of them.

Bind a hover function for the li tag. Whenever mouseover/mouseout is on the <a> tag the event will bubble up to the <li>
$(function(){
$("ul li").hover(function(){
$(this).css("color", "#fff");
},function(){
$(this).css("color", "#000000");
});
});
See a working demo
If you can achieve the effect using CSS then why go for javascript solution.

Related

jQuery hover effect for ::after

I'm firing several effects when I hover over a div. The problem is that the div also has the pseudo element ::after, which populates the div with a virtual element (a play button) using the content CSS rule.
My hover effects work when I'm hovering any part of the div other than the space where the ::after element is.
Simply, I want to know if there is a way to point towards the ::after element using jQuery. I've tried to define the ::after element as a variable named "play", but have had no luck there either. This is my script:
var play = $('a.image-wrap::after');
$(".image-holder, .big-headline a, .small-headline a, play").on({mouseenter: function () {
$('.image-holder').css('background-color', color);
$('.image-holder img').css({
'mix-blend-mode': 'multiply',
opacity: .6
});
if ($(window).width() > 1115) {
$('.read').css('right', '35%');
} else {
$('.read').css('right', '0');
}
},
mouseleave: function () {
$('.image-holder').css('background-color', '');
$('.image-holder img').css({
'mix-blend-mode': '',
opacity: ''
});
$('.read').css('right', '');
}
});
What if you just add the new CSS to a style and then remove it when we're done hovering? It works pretty well:
$(".example").on("mouseenter", function () {
$("#workAround").html(".example:after {background:pink}");
}).on("mouseleave", function () {
$("#workAround").html("");
});
.example {
height:10px;
width:100px;
background:green;
margin:20px 0 20px 0;
}
.example:after {
content:'';
background:red;
height:10px;
width:100%;
display: block;
position:relative;
bottom:-10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style id="workAround"></style>
<div class="example"></div>

JQuery: FadeIn an addclass?

I came to the point that I have to ask this to the community.
I have this site at the moment:
http://gyazo.com/e8f8e9884c3d40dee003c2234c840d56
As you can see in the menubar, the Home has a border underneath it.
What I'm trying to accomplish with JQuery is that whenever I hover any other menu item, the border will fadein slowly, and when the mouse leaves it will fadeout.
My current JQuery code:
$("li").mouseenter(function(){
$(this).fadeIn('slow').addClass("current");
});
$("li").mouseleave(function(){
$(this).fadeIn('slow').removeClass("current", 600);
});
The current class is the class that adds the border.
Anyone got some tips?
Thanks!
You could also use css transitions instead
ul li {
float: left;
margin-right: 10px;
list-style: none;
border-bottom: 1px solid transparent;
transition: border-bottom 2s ease;
}
ul li:hover {
border-color: #aaa;
}
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
you can not pass two parameters to 'removeClass' function in jquery.
you can check their documentation on 'removeClass'. If you want to remove multiple classes you have to send it in one parameter using spaces between each className.
and if you want to remove the class after the fadein effect completes, then just call the removeClass function in its call back. ( for reference read the documentation of fadein https://api.jquery.com/fadeIn/ )
$("li").mouseenter(function(){
var self = this;
$(self).fadeIn('slow',function() {
self.addClass('current');
});
});
$("li").mouseleave(function(){
var self = this;
$(self).fadeOut('slow',function() {
self.removeClass('current');
});
});
});
or if you want that after a certain time ,let us assume that 1000ms/1sec then the code will be:
$("li").mouseenter(function(){
var self = this;
$(self).fadeIn(1000,function() {
self.addClass('current');
});
});
$("li").mouseleave(function(){
var self = this;
$(self).fadeOut(1000,function() {
self.removeClass('current');
});
});
});

Make navigations items change color when active

I have the html code
<header> <nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
the css code :
a {
color: #7e7e7e;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #444;
}
a.active {
color: #82b965;
}
nav {
float: right;
padding: 20px;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: left;
padding: 10px
}
.current {
color: #333333;
}
and javascript is:
$(document).ready(function(e) {
$("nav a").on(function(){
$("nav a").removeClass("active");
$(this).addClass("active");
});
});
what I want is that when any button will active that time the color will be green,and other will remain same color.and I want to put them in the middle,and needs to be little big space between them.
the jsfiddle is:
jsfiddle code
I have done this..But not working..
$(document).ready(function(e) {
$("nav a").click(function(){
$("nav a").removeClass("active");
$(this).addClass("active");
});
});
Fiddle:https://jsfiddle.net/130w0y9c/
To make nav links center
Updated Fiddle:https://jsfiddle.net/130w0y9c/1/
there were some small errors. just use click() function if you use jquery anyway.
working fiddle:
https://jsfiddle.net/94b94u1g/
http://codepen.io/anon/pen/QbZdWr Done, working... the main problem was the on click
$(document).ready(function(e) {
$("nav ul li a").on("click", function(){
$("nav ul li a").each(function () {
$(this).removeClass("active");
});
$(this).addClass("active");
});
});
You had two errors:
First, as #Andrew said, Home should be Home.
Secondly, your use of the .on function in jQuery was missing out your target event. $("nav a").on(function(){... should have been $("nav a").on("click", function(){... . Also, if you're going by the codepen, make sure you have jQuery running it.
http://codepen.io/anon/pen/MwPJWZ

How to "mark" a UL/LI nav item as "active" based on click?

Each <a link is an anchor for jQuery to hide(show) certain divs.
I'm using this CSS to handle hover style:
ul.textMenu a:hover
{
border-bottom: 3px solid #ff5c00;
margin-bottom: -3px;
}
After the user clicks an item, I want that border-bottom to persist. How do I do this?
Add a css rule
ul.textMenu a.clicked
{
border-bottom: 3px solid #ff5c00;
}
and then some js
$('ul.textMenu a').click( function() {
// Remove the class clicked so that we have only one clicked item
// Since there might be more than one ul i finde the parent.
$(this).closest('ul.textMenu').find('a').removeClass('clicked')
$(this).addClass('clicked');
} );
jQuery('ul.textMenu a').click(function () {
jQuery('ul.textMenu a').removeClass('active');
jQuery(this).addClass('active');
});
The set your css for ul.textMenu a.active to keep the CSS border

css transition on mouseover

I have the following css for my drop down menu in my banner:
#nav-menu li a
{
background-image:url('../images/menu_background.png');
background-repeat:repeat-x;
background-position: left top;
height: 35px;
}
#nav-menu li a:hover
{
background-image:url('../images/menu_background_hover.png');
background-repeat:repeat-x;
background-position: left top;
height: 35px;
}
It works fine, except that I would like some animation effect when I hover over the <li> tag. Currently, it just replaces the background colour of the <li> when i hover over it.
I tried the example code below which changes the margin-left of the li tag but I do not know how to animate the css transition on hover:
$j(document).ready(function () {
//When mouse rolls over
$j("#nav-menu li").hover(function () {
$j(this).filter(':not(:animated)').animate({
marginLeft: '9px'
}, 'slow');
},
function () {
$j(this).animate({
marginLeft: '0px'
}, 'slow');
});
});
Thanks a lot for any suggestion.
A quote from this post,
Blockquote
I guess you would have to work around this by not using genuine background-images, but div elements containing the image, positioned using position: absolute (or fixed) and z-index for stacking. You would then animate those divs.
Blockquote
I got this working by removing the j after the $ in the variable names.
Fiddle: http://jsfiddle.net/XjxBj/
$(document).ready(function () {
//When mouse rolls over
$("#nav-menu li").hover(function () {
$(this).filter(':not(:animated)').animate({
marginLeft: '9px'
}, 'slow');
},
function () {
$(this).animate({
marginLeft: '0px'
}, 'slow');
});
});​

Categories