Develop Reference

jQuery: style hover on parents() and children()

I am wondering if it is possible to change the style of child when its element was hovered, while its css was also styled when its parent was hovered?
To make my question clear, I wrote down a basic code below:
//styling child while mouse is inside child element
$('child').on('hover', function(e){
if (e.type == 'mouseenter'){
$(this).css('background','yellow');
}
})
// styling child while mouse is inside parent
$('child').parents().on('hover', function (e){
if (e.type == 'mouseenter'){
$(this).css('background', 'blue');
}
})
So, basically once user enters space of parent to make child's bg blue, and once it enters space of child to change from blue to yellow bg.
I saw a comment on why I do not use css, so this is a little explanation: I am unable to select parent element. I can only do it from child using parents(). And as long as css does not support parents() method yet I went with jquery. :)

CSS Alone:
div {
padding: 20px;
border: 1px solid black;
}
/* something hovered that have .child as direct child => change .child color to blue */
*:hover > .child {
background-color: blue;
}
/* .child element hovered => override the above color and set it to yellow (note that the above rule is still taking effect when this is taking effect) */
.child:hover {
background-color: yellow;
}
<div>
PARENT
<div class="child">CHILD</div>
</div>
<div>
PARENT
<div class="child">CHILD</div>
</div>
<div>
PARENT
<div class="child">CHILD</div>
</div>

is that the behaviour you expect ?
$('#child').parent().on('mouseover', function(e){
if(this===e.target){
$(this).children().css('background','blue');
}else{
$(this).children().css('background','yellow');
}
}).on('mouseout', function(e){
$(this).children().css('background', 'green');
});
#parent{
width:200px;
height:100px;
background-color:#f00;
}
#child{
width:30px;
height:30px;
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child"></div>
</div>

Using jQuery scroll function

I am trying to add a class .red to #box-1 on scroll down using following code at this demo.
$(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 30) {
$("#box-1").addClass("red");
} else {
$("#box-1").removeClass("red");
}
});
the HTML:
<div id="box-1" class="row"></div>
<div id="box-2" class="row"></div>
<div id="box-3" class="row"></div>
and CSS:
.red{ background-color: red; }
#box-1{background-color: yellow; height:300px; width:100px;}
#box-2{background-color: green; height:300px; width:100px;}
#box-3{background-color: blue; height:300px; width:100px;}
But it is not working! What am I doing wrong?

Adding !important to the background-color of the red class does the trick.
ids identify elements. classes classify elements. ids have higher specificity and so
their styles have higher precedence.
.red{ background-color: red !important; }
See fiddle : http://jsfiddle.net/2v9fn1np/1/
Using !important is bad practice and usually an indicator that you have not utilized classes and ids effectively. In this case, to add the style, you can edit the style attribute of the element directly and achieve the highest precedence. Use jQuery's css method.

If you haven't noticed, the is getting the CLASS "red".
The problem is that you've referred to it's ID has having a yellow background. And since the ID is predominante over a CLASS, you must add it to the CLASS, EX:
#box-1.red{ background-color: red; }

OnClick event to change cell background

Link to JsFiddle
I'm having the need to change the cell's background color everytime the user click on it, but I can't get it to work!
This is my script :
$( function() {
$('.tk099 td').click( function() {
$(this).toggleClass("red-cell");
} );
} );
in which tk099 is the table's class, and I don't want any td tag which has a class be affected by the event. Is this possible? Thanks alot!

Your selector .tk099 td takes presidence over .red-cell because:
It is more specific
It is declared later than .red-cell (and CSS cascades)
Declare .red-cell later on and make it just as specific/more specific:
.tk099 td {
background-color:#EEEEEE;
text-align:center;
border-bottom:1px solid #CCC;
border-left:1px solid #CCC;
}
td.red-cell {
background: #F00; /* Or some other color */
}
JSFiddle

change css to and should be declared at the after the default css
td.red-cell {
background: #F00; /* Or some other color */
}

jQuery / CSS precedence when setting/overriding background-color

I'm using jQuery to addClass to a hovered over div...but the background color won't change. I'm guessing it's because it has previously been assigned a background-color in CSS? Other properties (border) on the hover class appear when hovering so addClass is working.
How can/should I make this work?
jQuery
$('.pick1-box').hover(
-> $(this).addClass('hover')
-> $(this).removeClass('hover')
)
CSS
.pick1-box, .pick2-box {
...
background: #eee;
...
}
.hover {
background-color: yellow;
border: 1px solid red;
}
html
...
<li class='nominee clearfix' id='146'>
<div class='candidate'>
<img alt="Enders" height="80" src="/assets/25803sm.jpg" />
Dick Waddington
</div>
<div class='pick-boxes'>
<div class='pick1-box'>
1
</div>
<div class='pick2-box'>
2
</div>
</div>
</li>
...

It depends how you're loading jquery and code but try this:
.hover {
background-color: yellow !important;
border: 1px solid red;
}

You can try re-ordering or adding an important to your CSS, or you could do something like:
$('.pick1-box').hover($(this).attr('style', 'background-color: yellow;border: 1px solid red;'),$(this).removeAttr('style'));
since element styles take precedence.

The problem, as you've stated, is because the style has been overridden in the style attribute of the element being affected. You have a couple of options:
Don't change the element's css directly.
Use !important on the settings you absolutely need to override element styles.
Change the element's css directly, but remove them once you're done with them.

You could make the 2nd rule more specific:
.pick1-box.hover, .pick2-box.hover {
background-color: yellow;
border: 1px solid red;
}
css specificity
This assumes that your .hover css actually occurs prior to the .pick1-box rule as these have equal specificity, the one which occurs later will have precedence.

Links lose their css background-color hover attribute when changing background with jQuery

I've got a menu like this one :
<ul id="menu">
<li>test</li>
<li>test2</li>
</ul>
and css :
#menu li a:link {
background: transparent;
}
#menu li a:hover {
background-color: red;
}
At some point in my code I need to make the background of the links transparent again, so I make a :
$("#menu > li > a:link").css("background","transparent");
Which works but after that, my problem is that it seems to wipe the background-color attribute of the css hover. Indeed when I hover the links again nothing happens. If that helps when I add color:blue in the #menu li a:hover css, the text is blue when I hover but still no background-color.
I figured out a way to do the hover with jQuery but I would prefer to do it with css since in my opinion that's how it should be.
Is it a bug ? Is there any way to make the background transparent without wiping the hover css ?
Thanks in advance,
Nolhian

I had this same problem, and my solution was to make two separate classes rather than change the background color in jquery.
a.default:hover { background-color: red; }
a.hovered:hover { background-color: transparent; }
$("#menu > li > a:link").removeClass("default");
$("#menu > li > a:link").addClass("hovered");

Target the background color directly, instead of simply "background":
#menu li a:link {
background-color: transparent;
}
$("#menu > li > a:link").css("background-color","transparent");

No, the problem is with your CSS and the fact it's being overwritten. Change:
a:hover {background-color: yellow; }
to this:
a:hover {background-color: yellow!important; }
Then it will work properly.

You can do a "onmouseover" javascript hover.

It's just a side effect of how CSS works. The :hover pseudo-class must be declared AFTER the :link pseudo-class. Changing :link will reset :hover, so you need to reset your :hover as well. One way to avoid this would be to move your CSS that alters the color from its initial setting into a class:
a:link {background-color: transparent; }
a:hover {background-color: yellow; }
a.myClass:link {background-color: cyan; }
And then
$("#menu > li > a:link").addClass("myClass");
And later
$("#menu > li > a:link").removeClass("myClass");