We Keep Coding

How can I edit this one to expand onmouseenter and collapse onmouseleave

I am using a wordpress plugin that I have managed to change it a bit but I was thinking of making it expand onmouseenter and collapse onmouseleave but I am not sure how to edit it.
$(document).on("click", ".woocommerce.widget_product_categories .product-categories li.cat-parent > .cat-menu-close", function(e) {
var $catParent = $(this).closest('li.cat-parent');
var state = 'opened'
$catParent.toggleClass(state);
$(this).nextAll('ul.children:first').slideToggle(state);
});

You need to bind a function to the div:
$( 'div you want to hover selector' )
.mouseover(function() {
$catParent.toggleClass(state);
})
.mouseout(function() {
$catParent.toggleClass(state);
});
jQuery Mouseover

Adding a active class to all span within a div

I have a div with 2 span as a link, I want to add active class on both span when mouse enters the container div i.e. fos-search-items
var $hover_element = $('.fos-search-items');
.mouseenter(function() {
$(this).find("span").addClass('fos-db-active');
})
.mouseleave(function() {
$(this).find("span").removeClass('fos-db-active');
})

You should use $hover_element on event while mouseenter and mouseleave
Option 1 Demo Here
var $hover_element = $('.fos-search-items');
$hover_element.mouseenter(function() {
$(this).find("span").addClass('fos-db-active');
});
$hover_element.mouseleave(function() {
$(this).find("span").removeClass('fos-db-active');
});
Option 2 Demo Here
Just remove the ; after the $('.fos-search-items')
var $hover_element = $('.fos-search-items').mouseenter(function() {
$(this).find("span").addClass('fos-db-active');
}).mouseleave(function() {
$(this).find("span").removeClass('fos-db-active');
});

You have not attached the events correctly.mouseenter and mouseleave should be attached to DOM elements jquery object.Like this:
$('.fos-search-items').mouseenter(function() {
$(this).find("span").addClass('fos-db-active');
})
$('.fos-search-items').mouseleave(function() {
$(this).find("span").removeClass('fos-db-active');
})
also, you can rather use .hover() with two function argumenents for mousenter and mouseleave:
$('.fos-search-items').hover(function(){
$(this).find('span').addClass('fos-db-active')
},function(){
$(this).find('span').removeClass('fos-db-active')
});

Try this
var $hover_element = $('.fos-search-items');
$hover_element.mouseenter(function() {
$( this ).find( "span" ).addClass('fos-db-active');
})
$hover_element.mouseleave(function() {
$( this ).find( "span" ).removeClass('fos-db-active');
})
Working demo

Insert element directly into div using Jquery ui Droppable

I have this system to create a list of chosen images by dragging and dropping the image items into a div id="trash".
This system is a copy from the photo manager in the jquery ui page:
Link
What I'm trying to implement is to have a arrow-up icon in each image sample to have it be inserted into the list without having to drag it.
I've managed to append the element but I'm having trouble to call the function deleteImage() so it animates like the animation after you drop the element inside the list.
Here is a JSFIDDLE of the project
This is what I have so far:
$('a.quick_insert').click( function(){
var sample = $("<li />").append($(this).closest($('li')).clone()).html();
$(this).closest($('li')).fadeOut(function(){
$('#trash').append(sample).fadeIn(function() {
var $list = $( "ul", $trash ).length ?
$( "ul", $trash ) :
$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
$sample.find( "a.ui-icon-trash" ).remove();
$sample.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
$sample.animate({ width: "48px" }).find( "img" ).animate({ height: "36px" });
});
});
});
});
Thank you

Try change your code in:
// Quick Insertion
$('a.quick_insert').click( function(){
deleteImage( $(this).parent() );
});
so you will reuse the same function of the example by passing the current clicked container as element.
Demo: http://jsfiddle.net/gqSaq/5/
EDIT
To let the recycle work correctly you must delegate its click usin on, because the element is dynamically created.
Code:
// Quick Insertion
$('#gallery li').on('click', 'a.quick_insert', function () {
deleteImage($(this).parent());
});
Demo: http://jsfiddle.net/gqSaq/6/

Changing parent css on child hover

i have look around this forum a lot and can only find the opposite to my question, in other words i am looking to find how to change the parent div's background when the child div is hovered over, i can only find how to change the child div, when the parent is hovered over.
I have 1 parent div with an inner submit button:
<div class="ugd_ele_normal_base">
<input name="ugd_1" type="submit" class="ugd_ele_normal"/>
</div><!--end ugd_ele_normal_base-->
What i want is for when the submit button is hovered over, the parent css changes background.
I have tried a few things, but nothing seems to work.
Thanks for the help

I would use jQuery & CSS for this:
CSS
.black {
background-color: #000000;
}
jQuery
$(function() {
$('.ugd_ele_normal').hover( function(){
$(this).parent().addClass("black");
},
function(){
$(this).parent().removeClass("black");
});
});

$('input.ugd_ele_normal').on({
mouseenter: function() {
$(this).parent().css('background', 'url(/folder/image1.jpg)');
},
mouseleave: function() {
$(this).parent().css('background', 'url(/folder/image2.jpg)');
}
});
or short(er) version:
$('input.ugd_ele_normal').on('mouseenter mouseleave', function(e) {
$(this).parent()
.css('background-color', e.type=='mouseenter'?'url(/folder/image1.jpg)':'url(/folder/image2.jpg)');
});
and to retrieve the old image:
var bgImg = $('input.ugd_ele_normal').css('background-image'),
hvImg = 'url(/folder/image2.jpg)';
$('input.ugd_ele_normal').on('mouseenter mouseleave', function(e) {
$(this).parent()
.css('background-image', e.type=='mouseenter'?hvImg:bgImg);
});
or use classes:
.hoverClass {background: url(/folder/image2.jpg);}
-
$('input.ugd_ele_normal').on('mouseenter mouseleave', function() {
$(this).toggleClass('hoverClass');
});

You can do this way.
$("#ugd_1").hover(function(){
$(this).parent().css("background","red");
},
function(){
$(this).parent().css("background","none");
});
​
​
Live Demo :
http://jsfiddle.net/Z4QDC/2/

i would define some jquery to do this, and use a custom class.
//when the document is loaded, execute the following code
$(document).read(function(){
//on this elements hover, ...
$('.ugd_ele_normal').hover( function(){
//we add the class black to the parent on hover
$(this).parent().addClass("black");
},
function(){
//and remove it on exit hover.
$(this).parent().removeClass("black");
});
});
​
can be seen in action here:
http://jsfiddle.net/xBuyC/

Try:
$('input[name="ugd_1"]').hover(function() {
$(this).parent().css('background-color', 'COLOR');
});
Hope it helps.

Javascript, switching images through both mouseover and click

I have some buttons( "ul.subjects li" ) and...
1. change buttons' background-images through mouseover actions
2. can be clicked one button at once.
　So once clicked a button, others are cancelled.
I have two this button lists and switch contents by clicked items(subjects and ages).
I can switch background-images by changing "class" of (class="mat" to class="mat_c").
$(function(){
$(document).delegate("ul.subjects li a", "mouseover", function(){
$(this).data("imgc", $(this).attr("class"));
var regex = /_s/;
if (regex.test($(this).data("imgc")) == false ) {
$(this).attr("class", $(this).data("imgc")+"_c")
}
});
$(document).delegate("ul.subjects li a", "mouseout", function(){
$(this).attr("class", $(this).attr("class").replace(/_c/, ""));
});
});
<ul class="subjects">
<li><a id="mat" class="mat" href="/age=all/sub=mat/"></a>算数・数学</li>
<li><a id="soc" class="soc" href="/age=all/sub=soc/"></a>社会</li>
<li><a id="sci" class="sci" href="/age=all/sub=sci/"></a>理科</li>
<li><a id="eng" class="eng" href="/age=all/sub=eng/"></a>英語</li>
</ul>
While button-click action doesn't work right, trying to change attribute into class="..._s",
but immediately changed into class="..._c".
$(function(){
$(document).delegate("ul.subjects li a", "click", function(){
$("ul.subjects").html($("ul.subjects").html().replace(/_s/g, ""));
$(this).attr("class", $(this).attr("class").replace(/_c/, "_s"));
});
});
Maybe I should control the events or order of them...
and there should be more simple ways to do this. How should I figure this out?
As you can see it on http://jsfiddle.net/MsdGS/1/,
After you click the under list , mouseover action doesn't work right.
Clicked buttons' "class" should be changed to "..._s",
(class="mat" to class="mat_s")
but "..._s" immediately changed to "..._c".
Thanks,

The result (i've removed the href in the bottom ul list)
If i have understood your question correct this is what you need to change:
$(function(){
$("#course_tb").load("/age=all/sub=all/"+"#course_tb");
$(document).delegate("ul.subjects li a", "click", function(){
// iterate through `subjects`'s "a"
$("ul.subjects li a").each(function(index, el){
$(el).attr("class", $(el).attr("class").replace(/_s/g, ""));
});
//html($("ul.subjects").html().replace(/_s/g, ""));
// ...
return false;
} );
} );

Try to use hover to implement mouseover and mouseout, like
$("ul.subjects li a").hover(function() {
$(this).css("background-image", "www.google.com");
}, function() {
$(this).css("background-image", "www.google.com");
});
As you can see, just try to use css:background-image to directly change the background image. This would bypass your problem.
Hope this works for you.
.hover() API