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; }
Related
I want to be able to add hover to the classList of an element to force trigger hovering styles.
In JS, how can I detect all :hover styles and add a hover class to have those same styles?
For example, if the class is:
a:hover {
}
I want to add:
a:hover, a.hover {
}
I want to write a JS script that makes the conversion I mentioned above, adding the a.hover class styles for ALL :hover. How can I do this?
NOTE: I don't have access to the CSS. It's loaded in externally so I can't just add to it. This is why I want to make a script that runs on start to do this.
As said in comment you could use a sass/scss mixins
SCSS
#mixin addHover {
&.hover {
background-color: red;
}
&:hover {
background-color: red;
}
}
div {
width: 100px;
height: 100px;
#include addHover;
}
HTML
<div class="hover"></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
<div class=""></div>
I have some dynamic user generated divs.
I'm trying to create a function so when the user hovers on one of the divs it highlights while the other divs get blurred.
Therefore I need to figure out how (if possible) I can change the hovered div with one style while changing all the others with another style.
The generated divs are simply spawn through php as a simple div looking like this:
<div class="usercontainer" id="usercontainer"> </div>
I have tried something like this to change the div the user hovers on. But I can't figure out how I at the same time can change all the others.
Do I need javascript for it? or can it be done with css alone?
.usercontainer:hover
{
background-color: red;
opacity: 1.0;
}
I am sharing with css approach only, though you can do it by adding a class at parent with javascript.
Disadvantage of this approach is you have to use !important to override child styles.
.children {
display: inline-block;
height: 100px;
width: 100px;
background-color: grey;
color: red;
font-size: 50px;
border: solid 1px yellow;
}
.parent:hover .children {
opacity: 0.2;
}
.children:hover {
opacity: 1 !important;
}
<div class="parent">
<div class="children">1</div>
<div class="children">2</div>
<div class="children">3</div>
<div class="children">4</div>
</div>
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>
The code:
$('.ask-button').click(function() {
$('.wpcf7-form').hide()
$(this).css('margin-left', 0)
})
I know I can't just do .toggle because in order to restore margin-left I have to include the original value (300px).
What's the simplest way to turn the event above into a toggle?
You can use .toggle() to show hide the element and use .toggleClass() for toggling class with css margin left set to 0:
$('.ask-button').click(function() {
$('.wpcf7-form').toggle()
$(this).toggleClass('marginzero');
});
CSS:
.marginzero{
margin-left:0;
}
HTML
<button class="ask-button">ask</button>
<div class="wpcf7-form">Sample text<div>
js
$('.ask-button').click(function() {
$('.wpcf7-form').toggleClass('wpcf8-form')
})
css
.wpcf7-form{ margin-left:300px; border:1px solid #ddd}
.wpcf8-form{ margin-left:0; border:1px solid #ddd}
use this link define width in class. it works
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.