Develop Reference

Add a class with hover effect in jquery

I want creating a website with some small news on the start-page. I show only the pics and show the headline and a small sentence with an hover-effect. Unfortunately I have no experience with jQuery and my code doesn't work.
$(document).ready(function () {
$(this).removeClass("#news-container .newscontent")
});
$(document).ready(function () {
$("#news-container img").hover(function () {
$(this).addClass("#news-container .newscontent");
}, function () {
$(this).removeClass("#news-container .newscontent");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

If you want to toggle some class or the visibility of some childs with jquery the dom stucture is key. Let's assume you got the following structure:
<div class="newscontent">
<img class="image" src="...">
<div class="text">Some text</div>
</div>
The following code registers for the hover event on every image within an element with a newcontent class. The image with the hover $(this) searches for the next element with a text class and toggles the visibility.
$('.newscontent img').hover(function(){
if ( $(this).next('.text').css('visibility') === 'visible' ){
$(this).next('.text').css('visibility', 'hidden');
}else{
$(this).next('.text').css('visibility', 'visible');
}
});
You can find a full working example here:
https://jsfiddle.net/3xy8ar96/1/

Hide when no longer hovering using jQuery

I want the div #reloadWarningBackground to show ONLY when hovering over the button #reloadButton.
Here is my code:
$('#reloadButton').mouseover(function() {
$('#reloadWarningBackground').show();
});

Use mouseout like following.
$('#reloadButton').mouseover(function() {
$('#reloadWarningBackground').show();
}).mouseout(function() {
$('#reloadWarningBackground').hide();
})
UPDATE
It is better to use mouseenter since mouseover will be executed repeatedly.
$('#reloadButton').mouseenter(function () {
$('#reloadWarningBackground').show();
}).mouseleave(function () {
$('#reloadWarningBackground').hide();
})

The simplest and best way to address this problem is using toggle().
//html
<button id="reloadButton">
Hover me
</button>
<div id="reloadWarningBackground" style="display:none;">
<p>
Hello this is me
</p>
</div>
//Javascript
$('#reloadButton').hover(function() {
$('#reloadWarningBackground').toggle();
});
fiddle

How to pause Jquery div slider on mouseover and restart it on mouseout

Good evening,
I have prepared jsfiddle Demo here http://jsfiddle.net/Z6Y95/1/
this is the html:
<ul>
<li><a href="#" class="stop" id="dev" >a1</a></li>
<li><a href="#" class="stop" id="facebook" > a2</a></li>
<li>a3</li>
<li>a4</li></ul>
<div id="serviceimg" class="serviceimg">
<div class="hide" name="dev" style="background:red;color:#fff;">a1</div>
<div class="hide" name="facebook" style="background:red;color:#fff;">a2</div>
<div class="hide" name="seo" style="background:red;color:#fff;">a3</div>
<div class="hide" name="support" style="background:red;color:#fff;">a4</div>
</div>
This is a working jquery div slider, but I need to pause it on a href mouse over and show specific div associated with this a.
On mouse out it has to continue div sliding but in my case on mouse out I am getting a few seconds pause without and div shown.
How to start div sliding on mouse out?
Thank you in avance !

Here is the updated JS code:
$('.serviceimg div').hide(); // hide all slides
$('.serviceimg div:first-child').show(); // show first slide
var prop;
prop = setInterval(function () {
$('.serviceimg div:first-child').hide()
.next('div').show()
.end().appendTo('.serviceimg');
}, 3000);
$('div').hover(function () {
clearInterval(prop);
}, function () {
console.log('out');
prop = setInterval(function () {
$('.serviceimg div:first-child').hide()
.next('div').show()
.end().appendTo('.serviceimg');
}, 3000);
return false;
});
DEMO
SetInterval can be very "dangerous" because it can stack when you hover. I used return false to prevent that.
The .hover function turned out to be the most suitable for your case. You can read more about it here .

show image on hover just for the actual hovered element

I have a set of divs built like this with display:none; on .imageholder:
<div class="parent">
<div class="imageholder">
<img src="img.jpg">
</div>
<div class="parent">
<div class="imageholder">
<img src="img.jpg">
</div>
</div>
<!--and so on...-->
and this jQuery:
$('.parent').hover(
function() {
$('.imageholder').fadeIn('slow');
},function() {
$('.imageholder').fadeOut('slow');
}
);
When I hover the .parent div all related parent divs are displaying the image.
How can I make the hover state to work just for the actual hovered parent element?
Thanks!

function () {
$(this).find(".imageholder").fadeIn("slow");
}
You can use this in the .hover callback to refer to the hovered (parent) element.

$('.parent').hover(function () {
$(this).find(".imageholder").fadeIn("slow");
});

Try this fiddle you can use .find() method for to point div.
Just like
$(document).ready(function()
{
$('.parent').hover(function() {
$(this).find('.imageholder').fadeIn('slow');
},function() {
$(this).find('.imageholder').fadeOut('slow');
})
});

Toggle ExpandAll/CollapseAll

I am currently using jQuery toggle to toggle between show and hide. It works perfectly fine for individual elements. When I try to do a expand all and collapse all it works fine for all the condition except one. If any individual element is already expanded or collapsed it does toggle them but not as expected. That is, when I click on expand all it expands all the elements except the individual element which is already expanded get collapsed and vice-versa. How do I take care of this condition?
<script type="text/javascript">
$(".toggle_container").hide();
$("div.description-content-title").toggle(function () {
$(this).addClass("collArrow");
}, function () {
$(this).removeClass("collArrow");
});
$("div.description-content-title").click(function () {
$(this).next(".toggle_container").slideToggle("slow");
});
$(".close-all").toggle(function () {
$(".close-all a").text("[Expand All]");
}, function () {
$(".close-all a").text("[Close All]");
});
$(".close-all").click(function () {
$(".toggle_container").slideToggle("slow");
});
</script>
HTML:
<div class="news-top-head">
<div class="time-head sortable" data-sort-column="ContentDate">
<span style="float: left; width: auto;">Time</span> <span class="sort-order-hidden ui-icon" />
</div>
<div class="description-head sortable" data-sort-column="ContentTitle">
<span style="float: left; width: auto;">Description</span> <span class="sort-order-hidden ui-icon" />
</div>
<div class="close-all">
close all
</div>
<div class="clear">
</div>
</div>
<div class="description-content">
<div class="description-content-title expArrow"><%=breakingNews[index].ContentTitle%></div>
<div class="toggle_container">
<p ><%=breakingNews[index].ContentDescription%></p>
</div>
</div>
</div>
If you have any code sample it would be really helpful.

You can't use toggle for your close-all button in that case unless you add an extra class to something to figure out which the odd one out is and ignore it. Easiest way to make this work is to use slideDown() and slideUp() instead of slideToggle(). Remove the following code:
$(".close-all").click(function () {
$(".toggle_container").slideToggle("slow");
});
And change:
$(".close-all").toggle(function () {
$(".close-all a").text("[Expand All]");
}, function () {
$(".close-all a").text("[Close All]");
});
To:
$(".close-all").toggle(function () {
$(".close-all a").text("[Expand All]");
$(".toggle_container").slideDown("slow");
}, function () {
$(".close-all a").text("[Close All]");
$(".toggle_container").slideUp("slow");
});

Check out this code if useful,
jQuery(document).ready(function($) {
$("#toggle_container").hide();
});
function showSlidingDiv(){
$("#toggle_container").animate({"height": "toggle"}, { duration: 500 });
}
Also can refer to Show-Hide div content using jQuery if required..