Develop Reference

JQuery Hover and SlideToggle

I wanted to make the navbar to stay displaying, not until i left my pointer hovered to that portion. What happens is that if I hover my pointer to the navbar, the display keeps getting toggled (displaying in then hiding.. it's on loop?) I just want it to stay. Then hide again when my pointer left
<script>
$(document).ready(function(){
$(".menu-trigger").hover(function(){
$("li").slideToggle(400, function(){
jQuery(this).toggleClass("nav-expanded").css('show','');
});
});
});
</script>
img {
padding: 0px;
max-width: 100%;
max-height: auto;
}
.menu-trigger {
pointer: cursor;
display: block;
position: fixed;
font-family: Sans-serif;
font-size: 15px;
background-color: #664c7d;
height: 35px;
width: 100%;
}
li{
display: none;
}
li.navbar ul {
}
}
div.nav-expanded {
display: block;
}

Your code has a few errors and it is not entirely clear what you are trying to accomplish (.css('show', '')?).
I assume that what you need is an element that will toggle its class when hovered and will change back to its original state when it is not hovered anymore.
What you need to do, is toggle the class of your navigation bar every time your mouse goes over the element and out of it.
Assuming $nav is your navigation bar, you can use:
$nav.on('mouseover mouseout', function(){
$nav.toggleClass('show');
});
Alternatively (and arguably safer):
$nav.on('mouseover', function(){
$nav.addClass('show');
}).on('mouseout', function(){
$nav.removeClass('show');
});
You can see usage in this JSFiddle.

Custom Cursor using CSS styling - html/css - javascript

I'm trying to make a custom cursor without uploading an image.I want the cursor to be a little blue circle. Currently, I'm trying to set the cursor's css as an id. Then I would associate the built in CSS cursor styling with the new id:
.mainbody{
....
cursor:#id?
};
Is this possible? Am I even going about this correctly? All help appreciated.

If you want to have a custom CSS cursor, you need to add a div in your markup, style it, hide the default cursor and move it to the mouse coordinates :
$(document).ready(function() {
$(document).on('mousemove', function(e) {
$('#cursor').css({
left: e.pageX,
top: e.pageY
});
})
});
html {
cursor: none;
}
#cursor {
height: 20px;
width: 20px;
border-radius: 20px;
background-color: blue;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cursor"></div>

Here are all types of cursors.
https://css-tricks.com/almanac/properties/c/cursor/
I think this is what you're looking for:
{ cursor: wait; }

Circular Images - Apply Tint on Hover

I am attempting to apply a tint of #e30009 on hover of some images.
I tried with Javascript and a div that was placed over the image, however the overlay kept flashing on mouseover?.
See my JSFiddle: http://jsfiddle.net/vX96M/
$(document).ready(function() {
overlay = $("#overlay");
img = $('#rob');
overlay.width(img.css("width"));
overlay.height(img.css("height"));
overlay.css("top", img.offset().top + "px");
overlay.css("left", img.offset().left + "px");
overlay.css('opacity',0);
$('#rob').delay(500).hover(function() {
$('#overlay').fadeTo('slow',0.9);
})
})
I also tried with pure CSS but I cannot seem to achieve the correct color. I did:
img:hover { -webkit-filter: sepia(90%) hue-rotate(90deg); }

Best bet here is to probably set the overlay as "display:none;", delegate the events and then use an addClass vs removeClass function. Main issue is that the overlay is interfering with the mouseover events, so just add another function for that. See jsfiddle below:
http://jsfiddle.net/vX96M/2/
$(document).on('mouseenter', "#myimg", function () {
$('#overlay').addClass("show-as-block");
}).on('mouseleave', "#myimg", function () {
$('#overlay').removeClass("show-as-block");
});
$(document).on('mouseenter', "#overlay", function () {
$('#overlay').addClass("show-as-block");
}).on('mouseleave', "#overlay", function () {
$('#overlay').removeClass("show-as-block");
});
Also should set the width and height of the overlay and then have a class to display as block.
.overlay {
display: none;
position: absolute;
border-radius: 50%;
background-color: rgba(200, 100, 100, 0.5);
top: 0px;
left: 0px;
width: 0px;
height: 0px;
width:280px;
height:280px;
z-index:0;
}
.show-as-block {
display:block;
}

Imagemap with overlying div: Mouseover disappears on div

Could anyone give me a hint how to solve this?
Fiddle: http://jsfiddle.net/9Br6h/
Have a look at the part left under... with the flag. On the area the mouseover is visible.. but it disappears on the flag - that is the thing I want to remove. It should stay visible.
But please keep in mind that this is a very simple example. In real I've tons of areas and flags. ;o)
jQuery(document).ready(function($) {
// add div for showing dates
$('body').append('<div id="mo_termin"></div>');
// show div on mouseover
$('area').mouseover(function(event) {
var left = event.pageX + 30;
var top = event.pageY + 5;
display = '<div class="views-field-field-body">Keine Termine</div>';
$('#mo_termin').css({top: top,left: left}).html(display).show();
});
$('area').mouseout(function() {
$('#mo_termin').html('').hide();
});
});

you can use the css property pointer-events: none;as well.
#karte .flag {
pointer-events: none; /*Added line*/
position: absolute;
background: url('http://static.netzwelt.de/farcade/images/capturetheflag1.gif') no-repeat;
width: 50px;
height: 50px;
top: 200px;
left: 50px;
}
Here is the Demo http://jsfiddle.net/9Br6h/2/.

Assuming that the flag completely covers the 'hover' area underneath it, you can modify your code so that the line that sets the mouseover event reads as follows:
// show div on mouseover
$('area, .flag').mouseover(function(event) {
Here is an example: http://jsfiddle.net/9Br6h/1/

How to show hover with mouseover on element with Javascript?

I am curently working on one Javascript to show hover when mouseover.
Here is my Javascript code:
<script>
$(document).ready(function(){
$('.playlogo').mouseover(function () {
$('.company-image-overlay').show();
}).mouseout(function () {
$('.company-image-overlay').hide();
});
});
</script>
Here is my html:
<li class="playlogo"><img src="./uploads/player_thumbs/[blkfeatured_videos.video_id;block=div].jpg" title="<!--[blkfeatured_videos.title;htmlconv=no;ope=max:50;maxhtml;block=div;comm]-->"/><div class="company-image-overlay"></div></li>
I have many <li class="playlogo"> elements on this page.
Here is the CSS code:
.company-image-overlay {
width: 160px;
height: 160px;
background: transparent url(/images/play.png) no-repeat;
border-radius: 15px;
z-index: 1;
opacity: 0.5;
position: absolute;
top: 0.5em;
}
The problem now is that when i mouseover one <li class="playlogo"> it shows the hover efect on all other elements with <li class="playlogo">.
The question is - How i can make the Javascript show hover only on the one element on which i hover with my mouse at the moment?
Thanks in advance!

You need to refer to this and get its children :
$(this).find('.company-image-overlay').show();

Might be able to accomplish this with CSS
.company-image-overlay{
display:none;
}
.playlogo:hover .company-image-overlay{
display:inherit;
}

You need to reference the specific .playlogo that you're hovering, and then use .children() to traverse from within that context. * I'm using .children() because we're only traversing one level. Here's a working example:
http://jsfiddle.net/jr6Vn/
$('.playlogo').each(function() {
$(this).mouseover(function() {
$(this).children('.company-image-overlay').show();
});
$(this).mouseout(function() {
$(this).children('.company-image-overlay').hide();
});
});