I want the div onhover background color to change to blue once button is clicked.
In this example, it changes the normal background color as well:
$(document).on("click", "button", function() {
$(".box").on("mouseover", function() {
$(".box").css("background", "blue")
});
})
.box:hover {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Change hover color</button>
<hr/>
<div class="box">Hello</div>
Try
$(document).on("click","button",function(){
$(".box").on("mouseover",function(){$(".box").css("background","blue")});
$(".box").on("mouseout",function(){$(".box").css("background","")});
})
.box:hover{background:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Change hover color</button>
<hr/>
<div class="box">Hello</div>
make use of hover() jquery function and make use of class instead of css
$(".box").hover(function(){
$(this).addClass("hover_me");
}, function(){
$(this).removeClass("hover_me");
});
css class
.hover_me {
background: blue;
}
Your Jquery DOM was incorrect,
Here is how it does
$(document).ready(function(){
// jQuery methods go here...
});
$(function(){
$('button').click(function(){
$(".box").on("mouseover",function(){
$('.box').css("background","blue")
});
$(".box").on("mouseout",function(){$(".box").css("background","")
});
})
});
.box:hover{background:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change hover color</button>
<hr/>
<div class="box">Hello</div>
In your jQuery, add an eventhandler for mouseout, to remove the background.
$(document).on("click", "button", function () {
$(".box").on("mouseover", function () {
$(".box").css("background", "blue")
});
$(".box").on("mouseout", function () {
$(".box").css("background", "none")
});
})
Related
I can remove class when I click On button. I need To add the remove class again after I click on button and span display when I click On window
my HTML file
<button>Click To show Comment</button>
<span class="my_comment my_comment_none">Hello</span>
my CSS FILE
.my_comment{display: block} .my_comment_none{display: none}
my js File
$(document).ready(function () {
$("button").click(function () {
$(this).removeClass("my_comment_none");
});
});
You can attach the click event on document object and check the target name to hide or show the comment:
$(document).ready(function () {
$(document).click(function (e) {
if($(e.target).is('BUTTON'))
$('.my_comment').show();
else
$('.my_comment').hide();
});
});
.my_comment{display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Click on the button to show the comment
and hide the comment on clicking anywhere else</div>
<button>Click To show Comment</button>
<span class="my_comment" id="comment">Hello</span>
use toggleClass
$(document).ready(function () {
$("button").click(function () {
$(this).toggleClass("my_comment_none");
});
});
for window click . maintain any unique id for button and use selectors with id
$(window).click(function () {
if ($('button').hasClass("my_comment_none")) {
$('button').removeClass("my_comment_none");
}
})
;
use toggleClass
$(document).ready(function () {
$("button").click(function () {
$(this).toggleClass("my_comment_none");
});
});
You may use simply jQuery slideToggle() function.
$("button").click(function(){
$(".toggle").slideToggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click To hide/show</button>
<div class="toggle">Hello</div>
This is my HTML:
<div id="cart">
<a>
<span></span>
<i></i>
</а>
</div>
And I have a mouseover effect when my mouse is over a <a> tag.
But I want to have a mouseover effect only on the <i> tag
This is my Javascript who adds the class "active":
$('#cart > .heading a').die('mouseleave').die('mouseover').die('mouseleave').die('click');
$('#cart').die('mouseleave').die('mouseover').die('mouseleave').die('click');
$('#cart').live('mouseover', function () {
if (!$("#cart").hasClass('active')) {
if (!Journal.isOC2) {
$('#cart').load('index.php?route=module/cart #cart > *');
}
$('#cart').addClass('active');
$('#cart').live('mouseleave', function () {
$(this).removeClass('active');
});
}
});
Then I replace#cart to #cart a i everywhere
Without any success.
I just remove the part Journal.isOC2 And its working
$('#cart a i > .heading a').die('mouseleave').die('mouseover').die('mouseleave').die('click');
$('#cart a i').die('mouseleave').die('mouseover').die('mouseleave').die('click');
$('#cart a i').live('mouseover', function () {
if (!$("#cart a i").hasClass('active')) {
$('#cart a i').addClass('active');
$('#cart a i').live('mouseleave', function () {
$(this).removeClass('active');
});
}
});
.active{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="cart">
Div
<a> Anchor
<span>Span</span>
<i>Italic</i>
</а>
</div>
Or you can also do like this with latest version of jquery
$("#cart a i").on("mouseover", function(){
$(this).addClass("active");
});
$("#cart a i").on("mouseleave", function(){
$(this).removeClass("active");
});
.active{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cart">
Div
<a> Anchor
<span>Span</span>
<i>Italic</i>
</а>
</div>
you can use css using your div tag css or I tag css
you can see below example for mouse-over effect
.mainDiv i:hover{
color:red;
cursor:pointer;
}
<div class="mainDiv" id="cart">main div
<a> A tag
<span>Span tag</span>
<i>here is I Tag try to hover me</i>
</а>
</div>
First of all, your HTML is not properly written. A <a> tag requires a href="" attribute, for compatibility with older browsers.
Also your javascript looks like it needs some simplicity.
$('#code a i').hover(
function() {
// ran when onmouseover
},
function() {
// ran when onmouseleave
}
);
Now implement your own code inside the function you see above.
This is my ruff logic try this :
$( "a" )
.mouseover(function() {
$( this ).find( "i" ).addClass('active');
})
.mouseout(function() {
$( this ).find( "i" ).removeClass('active');
});
You can also simplify your code to the following using latest jQuery (2.1.1).
$(function () {
$('#cart i').on('mouseover mouseleave', function (e) {
if (e.type == "mouseover")
{
//if (!Journal.isOC2) $('#cart').load('index.php?route=module/cart #cart > *');
}
$(this).toggleClass('active');
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
.active {
color: red;
}
</style>
<div id="cart">
<a>
<span></span>
<i style="border:1px solid black;">here</i>
</а>
</div>
$(document).ready(function(){
$("i").hover(function(){
$(this).addClass('red')
$(this).mouseleave(function(){
$(this).removeClass('red')
})
})
})
.red{
color : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cart">
<a>this is
<span>span</span>
<i>italic</i>
</а>
</div>
I have managed to create a button that shows my div. but I want to have the button disappear as that happens.
At the moment my button only disappears the second time I click it. Any help appreciated.
$(document).ready(function() {
$('.click').click(function() {
$('#contact-form').toggle('slide', 500)
$('.click').toggle();
});
});
.click {
display: block;
}
#contact-form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">click</button>
<div id="contact-form"></div>
The reason why it is not working is, you are mixing the display between CSS and JavaScript. jQuery uses the current inline style to check if the button is hidden to display it, when you use .toggle(). Since it doesn't have anything at first, it adds a display: block (or whatever the initial value is) and then when you do the second time, it correctly identifies and removes.
The best thing to do is to use classes. I would suggest something like this parent class.
$(document).ready(function() {
$('.click').click(function() {
$("body").toggleClass("contact-form-open");
});
});
.contact-form-open .click,
#contact-form {
display: none;
}
.contact-form-open #contact-form {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Click Me</button>
<div id="contact-form">
Contact Form
</div>
This way, you control everything using CSS and you don't mess up with the event listeners or add the yucky inline CSS.
I've tried what you've tried and it seems to be working. Maybe it's because you don't close the div tag ?
$(function() {
$('.click').click(function() {
$('.myDiv').toggle();
$('.click').toggle();
})
});
http://plnkr.co/edit/wD0bwf8XK3CFXXM7rVWF?p=preview
but I want to have the button disappear as that happens.
So just use hide() instead of toggle :
$('.click').click(function() {
$('.click').hide();
$('#contact-form').toggle('slide', 500)
});
Hope this helps.
$(document).ready(function() {
$('.click').click(function() {
$('.click').hide();
$('#contact-form').toggle('slide', 500)
});
});
#contact-form {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">click</button>
<div id="contact-form">Form content</div>
More easy:
$(document).ready(function() {
$('.click').click(function() {
$("#contact-form").show();
$(this).remove();
});
});
#contact-form{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">Click Me</button>
<div id="contact-form">
Contact Form
</div>
I'm trying to have a button create a line through a list but if you click it again it'll undo the line-through. I've tried a .toggle() but it did not work:
original code:
$("div").on("click", ".doneButt", function(e) {
e.preventDefault();
$(this).parents("li").css("text-decoration", "line-through");
});
.toggle attempt:
$(".doneButt").toggle(function() {
$(this).parents("li").css("text-decoration", "line-through");
}, function() {
$(this).parents("li").css("text-decoration", "none");
});
$(".doneButt").click(function() {
$(this).parents("li").toggleClass('withline');
});
.withline {
text-decoration: line-through
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>asdasdasda
<input type='button' class='doneButt' value='Click' />
</li>
</ul>
Using .toggleClass()
$( ".doneButt" ).on("click",function() {
var style = $(this).attr("style")+"";
if(style=="undefined")
$(this).parents("li").css("text-decoration", "line-through");
else
$(this).parents("li").removeAttr("style");
});
I have the following setup:
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
I'm trying to change all the background color of all of them at the same time, when the mouse is hovering over any one of them. I tried:
<script type="text/javascript">
$(function() {
$('.parent').hover( function(){
$(this).css('background-color', 'gray');
},
function(){
$(this).css('background-color', 'red');
});
});
</script>
But, the color is not "showing through" the children <div>s.
Is there a way to choose the descendents of "this". I have many of these sets in a row, so I think I need to use "this" so I don't have the call each parent by id. I'm thinking something like this:
<script type="text/javascript">
$(function() {
$('.parent').hover( function(){
$(this "div").css('background-color', 'gray');
},
function(){
$(this "div").css('background-color', 'red');
});
});
</script>
But, can't quite get it to work - all the examples on jquery.com use the id selector... none use "this".
Thanks a lot!
If you're not targeting IE6, no need to use JavaScript, pure CSS will do the trick:
.parent, .child {
background-color:red;
}
.parent:hover, .parent:hover .child {
background-color:gray;
}
have you already tried .children()?
jQuery API
you can use .find()
$(this).find('div').css('background-color','red');
http://api.jquery.com/children/
try this:
$(function() {
$('.parent').hover( function(){
$(this).children("div").css('background-color', 'gray');
},
function(){
$(this).children("div").css('background-color', 'red');
});
});
demo: http://jsfiddle.net/zt9M6/
You're using $() with mixed arguments - it's either got to be a string as a selector (div), or just a DOM element (this). To select all divs within the context of this, try calling it like this:
<script type="text/javascript">
$(function() {
$('.parent').hover( function(){
$("div", this).css('background-color', 'gray');
},
function(){
$("div", this).css('background-color', 'red');
});
});
</script>
From http://api.jquery.com/jQuery/#jQuery1
Do it with CSS classes
.parent .child{
background-color: red;
}
.hoverstyle .child{
background-color: gray;
}
$(.parent')hover(function() {
$(this).addClass("hoverstyle"):
},
function(){
$(this).removeClass("hoverstyle");
});