I have DIV1 and when user onmouserover it, I want to change the background of DIV2 (different part of the webpage), how to do that, please? And when the user onmouseout DIV1, then DIV2 should get back as it was before.
Thanks.
You could alternatively do it with CSS and the general sibling selector (~), or some combination of other selectors to specify the div you want to change.
.one:hover ~ .two {background:salmon;}
or
.one:hover ~ ul .three {background: lightblue;}
Demo
Here is how to bind mouse events in pure JavaScript.
document.getElementById('XYZ').onmouseover = function(){
//Do stuff here
}
Here is a jsfiddle of a div changing a CSS property of another div on mouseover.
let's say you have this html
<div class="div1"></div>
<div class="div2"></div>
And this css:
.div2 {
background: #FFF url(/path/to/mouseOUTImage) top left no-repeat;
}
.div2MouseOver {
background: #FFF url(/path/to/mouseOVERImage) top left no-repeat;
}
Then using jQuery you can do:
$('.div1')
.mouseenter(function() {
$('.div2').addClass('div2MouseOver');
})
. mouseleave(function() {
$('.div2').removeClass('div2MouseOver');
});
I tried to use plain JS to implement what you need,
DEMO
(function () {
//change the value of div1 with your first div box
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var defBC = div2.style.backgroundColor;
addEventHandler(div1, 'mouseover', function () {
div2.style.backgroundColor= 'black';
});
addEventHandler(div1, 'mouseout', function () {
div2.style.backgroundColor= defBC;
});
function addEventHandler(el, eType, handler) {
if (el.addEventListener) { // W3C, FF
el.addEventListener(eType, handler, false);
} else if (el.attachEvent) { // IE
el.attachEvent('on' + eType, function() {
handler.call(el);
});
}
}
})();
If you accept using jQuery, it would be something like this:
var bgcolor;
$("#id_of_first_div").hover(function(){
bgcolor = $("#id_of_div_2").css('backgroundColor');
$("#id_of_div_2").css('backgroundColor', '#ffcc00');
},
function(){
$("#id_of_div_2").css('backgroundColor', bgcolor);
});
Related
I'm using jQuery 191 and Hammer JS 204. I have the following example scenario
<div> class="myDiv">
<div class="content">
<img>
</div>
</div>
Example JS
$('.myDiv').hammer({}).bind("pan", function(h) {
h.gesture.srcEvent.preventDefault();
});
$('.content img').on('click', function(){
console.log('i was clicked');
});
When I click on the image to start panning myDiv, Right after panend, the myDiv img click event gets fired.
I've tried to stopPropagation and stopImmediatePropagation but still couldn't get it to stop firing the click after i finish panning.
var hammering = false;
$('.myDiv').hammer({}).bind("pan", function(h) {
h.gesture.srcEvent.preventDefault();
}).bind("panstart", function(h) {
hammering = true;
}).bind("panend", function(h) {
setTimeout(function(){
hammering = false;
}, 300);
});
$('.content img').on('click', function(){
if(hammering) return false;
console.log('i was clicked');
});
Another way to avoid this ghost click is to create a pseudo class over the hammer target.
for example you can add class and the style something like
`.block:after {
content: " ";
background: transparent;
top: 0;
left: 0;
width: 250px;
height: 100%;
z-index: 2;
display: block;
position: absolute;
}`
when panstart and remove it when panend.
hope this trick will help others.
I find out a easy way could prevent click event while hammer.js panning:
disable div pointer-events while pan start, then enable it while pan end.
...
myPanGesture.on("panstart", function(ev) {
$(".tab-pane.active").css({'pointer-events':'none'});
});
...
myPanGesture.on("panend", function(ev) {
$(".tab-pane.active").css({'pointer-events':'auto'});
});
...
I use mouseenter to input a new html. I face a challenge that I need to return the original style when mouse leave? When mouseleave, I need to remove the new html and use the original html What is the best way to do that?
var eye_disease1 = $('#eye_disease1');
eye_disease1.mouseenter(function () {
eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>').hide().fadeIn();
eye_disease1.css('border', 'none');
}).mouseleave(function () {
// what should I put here to return the original
});
Get the original HTML of eye_disease1 before changing and after mouse leave update HTML.
var eye_disease1 = $('#eye_disease1'),
diseaseHtml = '';
eye_disease1.mouseenter(function () {
if (!diseaseHtml) {
diseaseHtml = eye_disease1.html();
}
eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>').hide().fadeIn();
eye_disease1.css('border', 'none');
}).mouseleave(function () {
diseaseHtml = '';
eye_disease1.html(diseaseHtml);
});
You can all use the addClass
`$("selector").mouseenter(function(){
$(this).addClass("active");
})
$("selector").mouseleave(function(){
$(this).removeClass("active");
})`
var eye_disease1=$('#eye_disease1');
var eye_disease1_html;
eye_disease1.hover(
function() {
eye_disease_1_html = eye_disease1.html();
eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>')
.fadeOut(0)
.css('border','none')
.fadeIn(400);
}, function() {
eye_disease1.find('span.show_li, span.show_li_2')
.fadeOut(400)
.delay(400)
.html(eye_disease1_html)
.fadeIn(0);
}
);
But yeah I would prefer to have all the content inside (original, and the hovered content) there the whole time.
HTML:
<div id="eye_disease1">
<div class="original-content">
Original Content
</div>
<div class="hovered-content">
<span class="show_li">symptoms</span>
<span class="show_li_2">diseases</span>
</div>
</div>
CSS:
.hovered-content {
display: none;
}
.hovered {
border: none;
}
JS:
$('#eye_disease1').hover(
function() {
$(this).addClass("hovered");
$(this).find(".original-content").fadeOut();
$(this).find(".hovered-content").fadeIn();
}, function() {
$(this).removeClass("hovered");
$(this).find(".hovered-content").fadeOut();
$(this).find(".original-content").fadeIn();
}
);
You can see it here: https://jsfiddle.net/waga7Lu1/3/
The transition effect is a bit clumsy but I'm not really sure what you're after.
I'm trying to highlight elements within a iframe with no success. I've tried using mouseenter/mouseleave with no success. It does not fire.
$('#iframe').contents().mouseenter(function (e) {
//var element = $(e.target);
var element = $(this);
$(element).addClass("highlight");
}).mouseleave(function (e) {
$(element).removeClass("highlight");
});
I've had better success with mousemove however it highlights the parents as well which I don't want.
var prevElement;
$('#iframe').contents().find('html').on('mousedown', function (e) {
e.stoppropagation()
//e.preventDefault - did not work either
var element = $(e.target);
if (prevElement == null) {
prevElement = element;
element.addClass("edit-element-selector");
}
else {
if (prevElement != element) {
prevElement.removeClass("highlight");
//prevElement.parents().removeClass("highlight"); did not work
element.addClass("highlight");
}
}
});
HTML
<iframe id="iframe" srcdoc="#Html.Raw(ViewBag.html)"></iframe>
The css rule for .hover is not visible in the context of the iframe.
Either use .css() to set style directly, add the css links or clone all styles in the main document into the iframe with jQuery.
Here is a working jfiddle which you should easily be able to copy.
http://jsfiddle.net/danmana/pMBw2/
My problem had 2 issues.
My css was wrong.
Wrong
.highlight :hover {
outline:4px solid #f00;
}
Right
.highlight {
outline:4px solid #f00;
}
Hover was bubbling up to the parents. Mouseenter and mouseleave worked however.
var $iframe = $("#iframe").contents();
$iframe.find('*').mouseover(function (e) {
$(e.target).addClass('highlight');
}).mouseout(function (e) {
$(e.target).removeClass('highlight');
});
Try jQuery Hover
$(function () {
var iContent = $('#iframe').contents();
iContent.find('#id_username').val("New Value!");
iContent.find('#id_username').hover(function () {
$(this).css("border", "1px solid red");
}, function () {
$(this).css("border", "1px solid #c4c7cb");
});
console.log(iContent.find('#id_username'));
});
jsFiddle
Sorry I guess I misunderstood the question. Here is an updated fiddle changing the value of a text input and changing border color on hover.
This has been driving me crazy for a while, I cannot figure out what I am doing wrong. I am trying to make a 4x4 grid and change the color of each square when I hover my mouse over (the color stays after the mouse leaves) but the changing color part is not working.
Here is what I have so far:
Changing color on hover:
This is the part where I am stuck
$('.square').hover(function () {
$(this).addClass('hover');
});
You can remove your jquery code for adding class hover and just make this css change in the file
.square:hover {
background-color: red;
}
simply fixes your problem in pure Css.
Adding JsFiddle for this
http://jsfiddle.net/jjeswin/nb3dB/1/
You need to first call makeGrid(4); and then bind the event.
also to remove class you need to modify hover function to use mouseenter and mouseleave function:
makeGrid(4);
$('.square').hover(function() {
$(this).addClass('hover');
},function() {
$(this).removeClass('hover');
});
Working Demo
Update: for keeping the color even after mouseleave:
makeGrid(4);
makeGrid(4);
$('.square').hover(function() {
$(this).addClass('hover');
});
Demo with only mouseenter
I have updated the fiddle code http://jsfiddle.net/ZfKM8/5/
In your javascript, i've removed the hover function.
$(document).ready(function() {
function makeGrid(n) {
var grid = $('#container');
for (var i = 1;i<=n; i++) {
for (var j = 1; j <= n; j++){
grid.append("<div class='square'></div>");
}
grid.append("<div class='new_row'></div>");
}
};
makeGrid(4);
});
in your css, instead of .hover change it to .square:hover
.square:hover {
background-color: red;
}
$('#container').on("mouseenter", '.square', function() {
$(this).addClass('hover');
});
$('#container').on("mouseleave", '.square', function() {
$(this).removeClass('hover');
});
Use event delegation for dynamically created elements.
Demo:
http://jsfiddle.net/m6Bnz/1/
Use event delegation for added dom elements dynamically . it is the best way to do
$('#container').on('mouseenter' , ".square" , function() {
$(this).addClass('hover');
});
/* $('#container').on('mouseleave' , ".square" , function() {
$(this).removeClass('hover');
}); */
DEMO
here you go: http://jsfiddle.net/ZfKM8/3/
$(document).ready(function() {
function makeGrid(n) {
var grid = $('#container');
for (var i = 1;i<=n; i++) {
for (var j = 1; j <= n; j++){
grid.append("<div class='square'></div>");
}
grid.append("<div class='new_row'></div>");
}
};
makeGrid(4);
$(document).on('mouseenter','.square',function() {
$(this).addClass('hover');
});
$(document).on('mouseleave','.square',function() {
$(this).removeClass('hover');
});
});
Is there a specific reason why you're not using CSS for this?
.square:hover { color: #superAwesome }
If you want the color to animate (and delay when mousing out) you can use CSS3 transition:
.square { transition: color 1s; }
Try this
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<style>
.hover
{
background:red;
}
</style>
</head>
<body>
<div class="square" style="width:100px;height:100px;border:1px solid"> </div>
<script type="text/javascript">
$('.square').hover(function()
{
$(this).addClass('hover');
});
$('.square').mouseout(function()
{
$(this).removeClass('hover');
});
</script>
</body>
</html>
Since your boxes created dynamically to the DOM, the hover event will not be available for these boxes. In this case, event delegation will help you to attach that event
Try this
OP said the color stays after the mouse leaves
$('#container').on('mouseenter','.square',function() {
$(this).addClass('hover');
});
Make use of .toggleClass():
makeGrid(4);
$('.square').hover(function() {
$(this).toggleClass('hover');
});
I am using Jquery - is there a simple way to change the background color on a div when a user rolls over it?
You can do this with CSS:
#myDiv:hover { background-color: red; }
//or...
div:hover { background-color: red; }
If you need IE6 support and such and have to use jQuery, toggle a class, like this:
.hover { background-color: red; }
Then use .hover() and .toggleClass(), like this:
$(".myDivs").hover(function() {
$(this).toggleClass('hover');
});
You could use the .hover() event:
$('#divid').hover(function() {
// mouse enter
$(this).css('background-color', 'red');
}, function() {
// mouse leave
$(this).css('background-color', 'blue');
});
I think mouseenter & mouseleave is better than hover. Why? Bubbling reason ;)
if($.browser.msie && $.browser.version < 7) {
$('element').bind({
mouseenter:function(){ $(this).addClass('over'); },
mouseleave:function(){ $(this).removeClass('over');}
});
}
After this, you can simply add some CSS magic:
#element.over,
#element:hover {
/* do something */
}