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>
Related
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")
});
})
<script>
$(".image-popup").on('click', function() {
$(this).find(".myModal").addClass("modal-active");
$(".modal-active").css("display", "block");
});
$(".close").on('click', function() {
$(".modal-active").css("display", "none");
var myVar = $(this).closest(".image-popup");
myVar.find(".myModal").removeClass("modal-active");
$(".modal-active").css("display","none");
});
</script>
I am attempting to have a modal appear and then disappear when I click the close button. The problem is that the removeClass() will not work and the "display", "none" will not override the first click function. Any Help?
My guess from your question and your comment above is that the event from your second handler is bubbling up to your first handler:
$(".image-popup").on('click', function() {
$(this).find(".myModal")
.addClass("modal-active")
.show();
});
$(".close").on('click', function(evt) {
evt.preventDefault();
$(this).closest(".image-popup")
.find(".myModal")
.removeClass("modal-active");
.hide();
});
Try to prevent the event from bubbling out of the .close handler by using evt.preventDefault();
You can fix it with this simple solution:
HTML
<div class="image-popup">
<div class="show-modal btn btn-success">Show Modal</div>
<div class="myModal">
<div class="close btn btn-success">Close</div>
<p>My Modal is active</p>
</div>
</div>
CSS
.modal-active .myModal{
display: block;
}
.myModal{
display:none;
}
.close{
color:red;
display:block;
}
JS
$(function(){
$('.show-modal').click(function(){
$(this).parent().addClass('modal-active');
});
$('.close').click(function(){
$(this).closest('.image-popup').removeClass('modal-active');
});
});
See this fiddle for more details https://jsfiddle.net/a3yze54w/1/
My HTML is structured as below. I would like to give the clicked <a> element the class "active".
Although the debugger stops on the click() line, the code within the function is not being triggered.
$('#dropdownRow > div > a').on('click', function(e) {
$('#dropdownRow a.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
})
.active { color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" id="dropdownRow">
<div class="col-xs-3">
XXX
</div>
<div class="col-xs-3">
YYY
</div>
<div class="col-xs-3">
ZZZ
</div>
</div>
It's possible you do not have the jQuery firing at the right time. I suggest wrapping it in a $(document).ready
https://learn.jquery.com/using-jquery-core/document-ready/
$( document ).ready(function() {
// Add your code
$('#dropdownRow > div > a').on('click', function(e) {
$('#dropdownRow a.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
// End code
});
I have an issue using jquery. I have a content that have to become visible when I click on ul li in navigation.
But I'm missing something, when I click, nothing happens. I am not sure why this happens. Please take a look at the provided fiddle near the bottom
Here is the code:
$(document).ready(function(){
$("ul.topnav > li.one").click(function() {
$('.content').hide(500).fadeOut(400);
if ($(this).next().is(':hidden') == true) {
$(this).next().show(400).fadeIn(500);
}
});
$('.content').hide();
});
<ul class="topnav">
<li class="one">test</li>
<li>second</li>
</ul>
<div class="content">Some content here</div>
Here is a fiddle http://jsfiddle.net/2pBge/
Here you go
http://jsfiddle.net/Mc92M/1/
$(document).ready(function(){
$("li.one").on("click", function() {
$('.content').fadeOut(400);
if ($('.content').is(':hidden')) {
$('.content').fadeIn(500);
}
});
$('.content').hide();
});
When you used .next() it is targeting the second li, not content div so nothing shows or hides. I also removed the .hide and .show as you already have fade in/out
If you really want to use the .next() then you would have to do
$(document).ready(function(){
$(".topnav").on("click", function(e) {
if( $(e.target).parent().is('li.one') ) {
$(this).next().toggle();
}
});
$('.content').hide();
});
First of all, your event isn't firing. Just set up a click listener for ul.topnav and delegate the event:
$("ul.topnav").on("click", "li.one", function() { ... });
Then, delete the rest of that nonsense and just use .toggle():
$('.content').toggle();
Working DEMO
$(document).ready(function(){
$("ul.topnav").on("click", "li.one", function() {
console.log('clicked!');
$('.content').toggle();
});
$('.content').hide();
});
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");
});