I have container, contain numbers of box images. when i mouseover the image hide box will appear on the image. but when i use this script all the box get open...
$(".conbx img").mouseover(function() {
$(".topics-active").show()
});
$(".conbx img").mouseout(function() {
$(".topics-active").hide()
});
jsfiddle.net/xqfv3fhq
You've to get the current elements siblings.
$(".conbx img").mouseover(function() {
$(this).siblings(".topics-active").show()
});
Demo: https://jsfiddle.net/tusharj/xqfv3fhq/1/
Optimizations
$(".conbx").on('mouseover', 'img', function() {
$(this).siblings(".topics-active").show()
}).on('mouseout', 'img', function() {
$(".topics-active").hide()
});
Alternatively, you can also use hover:
$(".conbx img").hover(function() {
$(this).siblings(".topics-active").show()
}, function() {
$(".topics-active").hide()
});
Use this
$(".conbx img").mouseover(function() {
$(this).next('.topics-active').show()
});
$(".conbx img").mouseout(function() {
$(this).next('.topics-active').hide()
});
use this
$(".conbx img").mouseover(function(){
$(this).closest('.fltlft').find(".topics-active").show();
});
$(".conbx img").mouseout(function(){
$(this).closest('.fltlft').find(".topics-active").hide();
});
DEMO HERE
or you can just use just css without need to jquery at all
.fltlft:hover .topics-active{
display: block;
}
DEMO HERE
Related
I want to relate highlighted areas and links: square1-linkone; square2-linktwo; square3-linkthree; ...
The following code works, but is cumbersome and error-prone; is there any way to simplify it for many areas and links?
jQuery
$(function() {
$('.map').maphilight();
$('#linkone').mouseover(function() {
$('#square1').mouseover();
}).mouseout(function() {
$('#square1').mouseout();
});
$("#square1").on({
mouseover:function(){
$("#linkone").css("color","red");},
mouseout:function() {
$('#linkone').css("color","green");
}
});
$('#linktwo').mouseover(function() {
$('#square2').mouseover();
}).mouseout(function() {
$('#square2').mouseout();
});
$("#square2").on({
mouseover:function(){
$("#linktwo").css("color","red");},
mouseout:function() {
$('#linktwo').css("color","green");
}
});
$('#linkthree').mouseover(function() {
$('#square3').mouseover();
}).mouseout(function() {
$('#square3').mouseout();
});
$("#square3").on({
mouseover:function(){
$("#linkthree").css("color","red");},
mouseout:function() {
$('#linkthree').css("color","green");
}
});
$('#linkfour').mouseover(function() {
$('#square4').mouseover();
}).mouseout(function() {
$('#square4').mouseout();
});
$("#square4").on({
mouseover:function(){
$("#linkfour").css("color","red");},
mouseout:function() {
$('#linkfour').css("color","green");
}
});
});
You can use jQuery to find all all elements that has an Id that contains a specified string
$("[id*='link']")
Or you could give all elements that you would like to perform the same action on a class, and then find the elements by class instead
$(".colorgreen").css("color,"green")
Read more about selectors in the documentation api.jquery.com/category/selectors
I want to change the CSS for the element btn1 (its a button) while its active.
I want to look different as long as "story" is shown (when pressed shows a div, as long as the div is shown i want the button to have a different color from the normal css)
$(function() {
$('#btn1').on('click', function() {
$('#story').fadeToggle(400);
});
});
$('#btn1').on('click', function() {
$(this).toggleClass('active'); // add/remove a css class
$('#story').fadeToggle(400);
});
in your css add
.active{
// styles you wish to apply
}
Try .css() method:
$('#btn1').on('click', function() {
$(this).css({'border':'1px solid blue', 'color':'red'});
$('#story').fadeToggle(400);
});
Working Example
:active selector https://developer.mozilla.org/en-US/docs/Web/CSS/:active
and look on this site http://www.paulund.co.uk/css3-buttons-with-pseudo-classes
It sounds like you want to do this:
$(function() {
$('#btn1').on('click', function() {
$(this).css('background-color','red'); // or whatever
$('#story').fadeToggle(400, function() { // 'complete' callback function
$('#btn1').css('background-color','white');
});
});
});
MY PROBLEM
jQuery(document).ready(function () {
if ($('input.pokazkontakt').prop(':checked')) {
$(this).parent().nextAll('.pkbox:first').css('display', 'block');
} else {
$(this).parent().nextAll('.pkbox:first').css('display', 'none');
}
$('input.pokazkontakt').click(function () {
$(this).parent().nextAll('.pkbox:first').toggle('fast');
});
});
Demo
2nd part of JS is working (toogle), but i want to check first if checkbox is checked and hide the div or show. Where is a problem?
Try this:
jQuery(document).ready(function () {
$('input.pokazkontakt').each(function(){
if ($(this).is(':checked')) {
$(this).parent().nextAll('.pkbox:first').css('display', 'none');
} else {
$(this).parent().nextAll('.pkbox:first').css('display', 'block');
}
});
$('input.pokazkontakt').click(function () {
$(this).parent().nextAll('.pkbox:first').toggle('fast');
});
});
Use your logic reversely when you set display:none and display:block.
Use .is to check for checked state.
Use .each to iterate all your checkboxes
DEMO
You can use .is()
if($('input.pokazkontakt').is(':checked'))
instead of if($('input.pokazkontakt').prop(':checked'))
Demo
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.
I want just when I click on the image I see the new image and just after the click I want the new image changes with the default one, but I have to drag the mouse to see the default image but I don't want that.
This is my code:
$(document).ready(function(){
$(".img-button").live('click', function () {
$(this).attr("src","images/pressed.svg");
});
});
If you only have one image, I suggest you give it an ID instead of (ab)using the classname.
If you have several and use the same image for all, then change $("#myImage") below to $(".img-button")
Toggle
$(document).ready(function(){
$("#myImage").toggle(
function() {
$(this).attr('src','images/pressed.jpg');
},
function() {
$(this).attr('src',"images/default.jpg");
});
});
Swap after leaving
$(document).ready(function(){
$('#myImage').on("click",function() {
$(this).attr('src','images/pressed.jpg');
});
$('#myImage').on("mouseleave",function() {
$(this).attr('src',"images/default.jpg");
});
});
Swap half a sec after pressing
$(document).ready(function(){
$('#myImage').on("click",function() {
$(this).attr('src','images/pressed.jpg');
setTimeout(function() {
$('#myImage').attr('src',"images/default.jpg");
},500);
});
});