We Keep Coding

Cursor hand on hovered links don't disappear with "cursor: none;"

I am trying to use my own cursor only for hovering on links. This is why I don't set cursor: none on the whole body. I am trying to get rid of the hand via JS. in the inspector the body cursor says its cursor: none, but the hand still shows over my cursor
link.addEventListener("mouseover", () => {
mouseCursor.classList.add("cursorHov");
document.body.style.cursor = 'none';
});

Actually, you don't even need JavaScript for this. You can just do it in CSS. Like this:
.link:hover {
cursor: none;
}
For HTML:
Try hovering over this!
Now, you just need to create links, and if you want them to have no cursor, then give it a class of link. Of course, you could change the class name. Also, just note that whateverhref.com isn't where you would really want to go, it's just a placeholder.

Changing the cursor property on document.body won't change it when it's hovering something else that uses a different cursor.
Don't use JavaScript for this, use CSS's :hover pseudo-class:
.selector-for-your-link:hover {
/* CSS for your cursor (whatever you currently have for your `.cursorHov` class) */
}

Which DOM events are triggered on mouse hover and can they be emulated?

On the site http://themeforest.net/ there is a category dropdown that activates as the mouse hovers over the menu item (e.g. HTML, Marketing, CMS). However, I cannot seem to break on any DOM event that is attached to it (checking using Firefox debugger). The expected event listeners were something like mouseover on the <li>.
What I'd like to know is what events are attached to it (or how is this animation being triggered otherwise), how you found that information and whether these events can be emulated with $(el).trigger() or el.createEvent()
Thanks in advance.

It doesn't need to be a javascript which shows the submenu, it can also be done in plain css with the pseudo class ":hover".
I guess this is how it works on this page, since i can not see any changes in the DOM (like added classes, changed inline style). It can be done like this:
div ul {
display: none;
}
div:hover ul {
display: block;
}
With this css, ul's within div's are displayed once the div is hovered.
Anyways, regarding your question: "hover" does no really trigger a own event (as far as i know), it is more a combination of "mouseenter" and "mouseleave".
Hope this helps.
Edit: I checked the css on the page which proofes my assumption, there is the following css-rule which applies to the menu-point-li:
.header-categories__links-item:hover>.header-categories__links-dropdown
{
display: block;
}

Jquery CSS mouse hover animation not working smoothly

I have converted a flash ad using jQuery. Everything is working fine, but my mouse hover animation is not working smoothly. There is text "Details" at the bottom right, and when mouse is moved over the text, then the whole container turns black. I have added the effect as:
$('#disclaimer').hover(
function () {
$('#wrapper').addClass('hovered');
}, function () {
$('#wrapper').removeClass('hovered');
}
);
But it is not working perfectly; sometimes it works, and sometimes it does not. If I move my mouse over the "D" character of "Details", then it does not work. What am I missing here? I want this effect to work smoothly whenever I move my mouse over "Details" character; it should turn black.
Any suggestions?? this is my JsFiddle code.

When you hover over the #Disclaimer element, you set several elements to display:none;, including this one.
As this element disapears, the hover event is no longer active, so you end up with an infinite loop. To avoid that, use opacity:0; instead, which will keep your elements in place but not visible.
Also, to avoid the #disclaimer to move around, make it position:absolute;.
Here is the JS Fiddle
CSS
.hovered #Image_Car { opacity:0; }
.hovered #ctaBtn { opacity:0; }
.hovered #Image_logo img { opacity:0; }
.hovered #headlineText { opacity:0; }
.hovered #disclaimer { opacity:0; }
#disclaimer {
/* ... */
position:absolute;
top: 168px;
left: 235px;
}

I'd recommend just using the CSS :hover property, no sense in using javascript for simple styling changes like this.
You're having issues with a specific element not being associated with the parent element's hover functionality, which can be avoided by adding a rule to the parent's CSS and working from there.

The problem here is that when the hovered is show the Detail text is set to none, so the hover out event will dispatch, removing the hovered class!
You can fix this, by changing disclaimer hover part with this:
$('#disclaimer').mouseenter(
function (e) {
$('#wrapper').addClass('hovered')
.mouseleave(function () {
$('#wrapper').removeClass('hovered');
})
});
So the detail will disappear when the mouse leaves the div, you can also change the mouseleave to mousemove if you want it to disappear just on move.
Here is the result http://jsfiddle.net/r3BTU/2/

You can set up to classes (a hidden and a visible) and the switch between the classes with js.
var movingElement = document.getElementById("messageDiv");
var disclaimer = document.getElementById("disclaimer");
disclaimer.onmouseover= function(){
movingElement.className="class2";
};
disclaimer.onmouseout= function(){
movingElement.className="class1";
};
You can add trasitions in the css so the visible class "fades" in.
Here's a Demo:
http://jsfiddle.net/Nillervision/eSbzg/

toggle jquery - issue

I have this demo
However the mouse over when dragged to left or right stops the toogle.
The hover() event didn't solve the problem.
Any idea ?
div.fileinputs {
position: relative;
display: none;
}
#show {
width: 200px;
height: 40px;
background-color: red;
z-index: -2px;
position: absolute;
}
<div id="show"></div>
<div class="fileinputs">Visible Panel Div</div>
$('#show').mouseover(function() {
$('.fileinputs').toggle();
});

Given that you want to simply show the element on mouseover and then hide it on mouseout, you should also use mouseout() to define the desired behavior you want when the mouse is removed:
$("#show")
.mouseover(function(){
$(".fileinputs").toggle();
})
.mouseout(function(){
$(".fileinputs").toggle();
});
Example. (It's choppy because fileinputs is a separate element, and it's not counting hovering over that as hovering over the show div).
But you should use hover, just to make it easier:
$("#show").hover(function(){
$(".fileinputs").show();
}, function(){
$(".fileinputs").hide();
});
Example. (Choppy for the same reason as above).
Since your desired behavior is definite, we'll just use show() for when the mouse is over it and hide() when it is removed.
By the way, it is preferred that you bind events using delegate() (for older versions of jQuery) or on() (for jQuery 1.7+):
$(document).on("mouseover mouseout", "#show", function(){
$(".fileinputs").toggle();
});
Example.
Though, you really should just use CSS for this. You can place fileinputs inside of show and use a child selector:
#show:hover > .fileinputs {
display: block;
}
Example. This one doesn't flicker because the element is inside the one that's getting the hover declarations attached to it, and CSS considers it as though you are still hovering over the parent element (because you technically are, as the target of the hover is within the boundaries of the parent [it would still work if it was outside the boundaries because the element is still nested]).

I think it's because you set your z-index on show to be -2. Once the fileInputs div is visible, it becomes on top of show, and as a result, mouseover for show no longer responds.
If you notice, if you hover from left to right over the red show div, but just below where the text is, the fileinputs div does in fact toggle.

If you add a border around the fileinputs div, the cause of the behavior will be clearer.
See: http://jsfiddle.net/pS9L8/
Moving your cursor over the region where the two divs overlap triggers a mouseover event, showing the hidden fileinputs div. Since that div is now displayed on top of show, your cursor is no longer directly over the original show div. You then continue to move your cursor, and as it moves outside the fileinputs region, that move is seen as another entrance to the underlying show div. Which again triggers the .toggle(), re-hiding the fileinputs div.
One quick fix is to switch to the jQuery custom event mouseEnter instead of mouseover (although you may get some jerky artifacts as jQuery reasons about the meaning of "over"). Depending on what you're trying to achieve, another option would be to reorder the two divs by z-index.

Show and Hide a DIV with CSS or Javascript?

I just saw a demo that had this jquery code to show and hide a dive on hover, can't this be done with just regualr css though? And if you can do it with css is there any advantage of doing it with javascript?
$('.comment').hover(function() {
$(this).children('.delete').show();
}, function() {
$(this).children('.delete').hide();
});

CSS hover works fine with anchor tags, but IE6 does not recognize hover events on things like li tags.
If you were using an anchor tag, however, you could achieve the same effect in CSS:
a.comment .delete { display: none; }
a.comment:hover .delete { display: block; }

You can do this with CSS but IE6 only supports the :hover pseudo-class on anchor tags (A), so it's not as common.

Jody is correct. Check out the docs for the CSS Display property.

There is more functionality that the .hover will do. If you provide it more than 2 functions it will cycle through all the functions.
Example
$('.comment').hover(
function(){$(this).children('.delete.first').show()},
function(){$(this).children('.delete.first').hide()},
function(){$(this).children('.delete.second').show()},
function(){$(this).children('.delete.second').hide()}
);
That would show one set of children the first time they hover, then hide, and the next time show a different set of children.
The hover function also works over multiple elements, and only fires if the mouse has left all the elements (not just when it leaves one and moves to another)

I dynamically create something like this on the server side. I'm sure there is a more efficient/prettier way but this usually serves my needs. Basically hides all the divs and un-hides the one that needs to be shown (passed as arg in function from onClick event).
function toggleTab(id)
{
document.getElementById('divEnrollment').style.display='none';
document.getElementById('divSearch').style.display='none';
document.getElementById('divMeeting').style.display='none';
document.getElementById('divBenefit').style.display='none';
document.getElementById('div' + id).style.display='block';
document.getElementById('spnEnrollment').style.color='blue';
document.getElementById('spnSearch').style.color='blue';
document.getElementById('spnMeeting').style.color='blue';
document.getElementById('spnBenefit').style.color='blue';
document.getElementById('spn'+id).style.color = 'red';
}