How can I add a hover class to an element? - javascript

In my CSS I have:
li.sort:hover {color: #F00;}
All my LI elements under the sort class function properly when the DOM is ready.
If I create a new LI element (using mootools el.addClass(classname)) I can set the base class, but can't figure out how to add a hover class to it.
Any ideas?

The hover pseudoclass can be defined ahead of time in the stylesheet based on the classname that you're specifying. Such as:
li.classname:hover {color:#F000;}
So it's defined the same way, via the stylesheet. You would just plan ahead, knowing that you'll be defining the class name on JS-generated LI tags with a certain class, and style for it despite the fact that the list items don't exist until you create them with JavaScript.

Hover class is added automatically when you add the non hover class. E.g. if you have
.MyClass
{
...
}
.MyClass:hover
{
...
}
just add the MyClass, and the MyClass:hover will work.

:hover is not a class, but is a pseudo-selector that will select any elements the mouse is currently hovering over. If you create an li element, and add the sort class to it, then whenever you move your mouse over the element, the li.sort:hover rule should be activated, if the browser is working correctly.

Not all browsers will accept the hover pseudo class on all elements. You should consider using javascript for this effect. jQuery for example, makes this very easy.

Not all browsers will accept the hover pseudo class on all elements. You should consider using javascript for this effect. jQuery for example, makes this very easy.
To be more specific, IE6 only picks up :hover styles on anchor (a) elements.

Related

Element with display:none is not counted as hidden by jQuery

I have an element which has display:none initially. When I click a button, a jQuery event is triggered, and my script toggles the element's display attribute between block and none when the button is clicked.
I am trying to make it so the background of the element's parent changes color depending on whether or not the element is hidden.
$("#button").on('click', function(){
if($(".hidden-content").is(":hidden")) {
$(".other-element").css("background-color","rgba(20,20,20,.9)");
} else {
$(".other-element").css("background-color","rgba(20,20,20,0)");
}
})
For some reason, when I click the button to toggle the dropdown, the jQuery treats the .hidden-content like it's not hidden, even though when I inspect the element, it says
.other-element { display: none };
Does anyone know why this could be? Since the hiddenness is toggled using jQuery, it may not actually change .hidden-content's own css, but I don't see why that should be a problem on the very first click.
The easiest solution is to add a CSS class to the element whose background-color property you want to change. Check it out:
In your click function, you can use jQuery's .toggleClass() method to add and remove a CSS class every time the button is clicked. In your CSS, you can then override the default background color with the new class selector. There's an example below. It sounds like you have your own method of hiding and showing the content, so for this example I'm just going to use jQuery's .toggle() function to do that bit.
I've created a working example on CodePen for you as well :)
$('#button').on('click', function() {
// The important part: add and remove the CSS class to change colors!
$('#parent-element').toggleClass('content-on');
// Hide and show the content element. You can do this differently of course:
$('.content').toggle();
});
And your CSS would look something like this:
#parent-element {
background-color: rgba(20,20,20,.9);
}
#parent-element.content-on {
background-color: rgba(20,20,20,0);
}

Change css class atributes dynamically from Jquery?

I have a situation in my project , in css I have a class
which is empty for now
#version_mobile.hidden
{
}
and in js Im doing this
this.$("#version_mobile.hidden").css({right: - window.text_mobile_width});
(I supose my selector is bad ?)
how to add "right" atribute to this class with this dynamically created value ?
to class become
#version_mobile.hidden
{
right : -450px;
}
Btw I need to use this class because the animation is working with it :/
.css() function changes the inline css style but has no effect over the css classes at all.
As pointed out in the documentation:
When using .css() as a setter, jQuery modifies the element's style
property.
You can also change the classes by using the addClass(), removeClass() or even the toggleClass() functions of jQuery.
You cannot add to the class properties, but you can apply rules to the element style.
this.$("#version_mobile.hidden").css({"right", "- window.text_mobile_width"});
you can not add definations for class in jquery.
but you can add any style to your selecter.
What are you trying to achieve?
you cannot add a property to the css file using this.
what you should look at is you apply this id or class to your html elements
and access the elements in the javascript using the jquery selectors
$(#selector) and modify the property using .css.
So you will achieve the same result this way as any existing property style for that
element will be overridden with your latest style put through the jquery.
It's technically possible to modify style rules on the fly, but it's difficult.
In the document object you will find an (array) property called styleSheets, with one entry for each referenced stylesheet.
Each stylesheet object (of type CSSStyleSheet) has an insertRule method, which you can use to create new rules, or delete existing rules. What appears to be difficult is enumerating the existing set of rules so you can find which one to modify or delete.
That said, it's generally far preferred to simply change an element's classes than to try to dynamically change the styling of an existing class.
See also http://davidwalsh.name/add-rules-stylesheets

Forcing an element to :hover with JavaScript when dragging an element over it. No jQuery

I've found a couple of search results here but they're all for jQuery and the couple I looked at weren't applicable to my case.
This is a small project and I've avoided using jQuery so far. I want to keep it like that as to not need the library.
Basically, I'm dragging an <article> element to a <div> element. The div has the background-image of a closed trashbin. In the CSS it is set to display the same, but open, trashbin when :hover is triggered.
Now, when I pull my article element to the div, the :hover effect isn't being triggered.
How do I do this?
All required elements are set draggable and the needed event listeners have been added, Console.log confirms they work.
You can define a CSS class called 'open_trash' and set the background image of a open trash there and then you can use javascript to change the class of the dragged element on mousedown like this
document.getElementById("draggedItem").className = "open_trash";
You can set the class name to either an empty string or something else onmousedown.

Can I use jQuery to change a CSS property for a CSS class, not a matched element?

I am trying to use jQuery to set the margin-left property for a CSS class.
$('.first_note').css('margin-left',50);
Only one element on my page will ever have the class first_note.
I need to remove the first_note class from the element, and apply it to another element. The problem is when I do, the previous first_note still has the margin-left value of 50, and the new one doesn't.
It's because in that jQuery code I'm applying the css property to the element. What I actually need to do is change the property for the class itself. Is this possible with jQuery?
#Ben, I think in this case I'd do it this way;
Create a class called say Margin50.
I'd then set the classes in jQuery
accordingly.
So if you have your two elements, the first one uses removeClass for first_note and also the Margin50 and then apply first_note and Margin50 to the next element.

jQuery Parent Class Attribute

I want to add a slide up affect with jQuery to a DIV when a link inside of the DIV is clicked, but the problem i am running into is the class of the DIV's are defined by a loop. So, i can't define the DIV class in the jQuery line, because each DIV class is different and i cannot determine ahead of time what they are. I am trying to use .parent and .child but I am not sure how to go about this. Is this making any sense?
Bind to the click of the element you want (in this case I just used a simple anchor element). Then find the first parent that is a div and perform the slideUp() effect.
$('a').click(function() {
$(this).parents('div:first').slideUp();
});
You can see it work here: http://jsfiddle.net/XNnSp/
Let me know if that's what you are looking for http://jsbin.com/ehoza3
$('a').click(function() {
$(this).parent().slideUp();
});
Two (most obvious) ways
FIRST
If your tree is always defined in terms of depth you could access your parent DIV doing just that:
$(this).parent().parent().parent().slideUp();
SECOND
Add an additional class that doesn't clash with dynamic ones and do this:
$(this).closest(".some-custom-class").slideUp();

Categories

Resources