I have a invisible div that on top z-index which I want to act as a clicktag button. But it does not get any mouse event I try to associate with it. Neither it does show the hand pointer specified with css.
This is the example: http://www.miguelrivero.net/test/MS-20_mini/index.html
As you can see I'm using this simple code (just focus on console.log's):
function bgExitHandler(e) {
Enabler.exit("Background Exit");
console.log("click");
}
function onMouseHandler(e) {
console.log("click");
}
document.getElementById("bg-exit").addEventListener("click", bgExitHandler, false);
document.getElementById("bg-exit").addEventListener("onmouseover", onMouseHandler, false);
This is the css:
#bg-exit {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
cursor: pointer;
opacity: 0;
}
Any light on this, please?
Thanks!
If you are using addEventListener, the name of the event is just mouseover, not onmouseover:
i.e.
document.getElementById("bg-exit").addEventListener("mouseover", onMouseHandler, false);
Related
I'm trying to use mousemove event on document.body to change the cursor (I'm not using CSS because I want to edit the new cursor based on its position).
This part works just fine,
but when I try to detect mouseenter on other elements whitch are body childs, I run into a problem, the mouseenter ( or mouseleave ) doesn't get fired off unless I move the mouse too fast, and also they fire off both together...
Here is my HTML:
<style>
#cursor {
position: absolute;
width: 15px;
height: 15px;
background: #595959;
border-radius: 9999px;
z-index: 9999;
}
#test {
width: 300px;
height: 100px;
border: 1px solid red;
}
</style>
<div id="cursor"></div>
<div id="test"></div>
and my Js:
const cursor = document.querySelector('#cursor');
const test = document.querySelector('#test');
function onBodyMouseMove(e) {
cursor.style.left = e.clientX - 7.5 + 'px';
cursor.style.top = e.clientY - 7.5 + 'px';
};
function enter(e) {
console.log('mouse entered');
}
function leave(e) {
console.log('mouse left');
}
document.body.addEventListener('mousemove', onBodyMouseMove);
test.addEventListener('mouseenter', enter);
test.addEventListener('mouseleave', leave);
you can check out the pen: https://codepen.io/hamid331994/pen/ExgGwqO
Note:
using e.stopPropagation(); doesn't work
adding { passive: false } doesn't work neither
The problem is with CSS. Your mouse cursor is still above element #cursor not above element #test and when you move your cursor faster that means DOM was not updated your #cursor element position.
When you will add pointer-events: none; to #cursor then will help.
The problem is that body dose not really count as much as window in this case.
So you could fix this problem by simple adding this line.
window.addEventListener('mousemove', onBodyMouseMove);
The background image is an image of an office. The background image will have a few <a> tags where the person can click. For example: there is an <a> tag on a computer that's on the desk. Taking this example, I want to do the following:
Hovering on the <a> tag that is over the computer, will load in a picture of the same office, however, the computer has been outlined with a white line in photoshop (Lets say: img/bureau2). Indicating that it is interactable. Hovering away from this will return it to the original picture which you see when you enter site (img/bureau1)
You can also click on the <a> tag. This will open up another image (img/bureau3).
So far I managed to get the change on hover and click to work. Issue is, hovering away from the <a> tag will cancle the click.
This is what I have so far, how can I tackle this issue?
$(".computerHover").hover(function() {
$("#backgroundImage").attr('src', 'img/bureau2.png');
},
function() {
$("#backgroundImage").attr('src', 'img/bureau.png');
});
$(".computerHover").click(function() {
$("#backgroundImage").attr('src', 'img/bureau3.png');
});
#pagina2 {
width: 100%;
height: 100%;
}
#backgroundImage {
height: 100vh;
width: 100vw;
z-index: 0;
display: block;
}
.computerHover {
width: 105px;
height: 75px;
position: absolute;
right: 28vw;
top: 40vh;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pagina2">
<div id="pagina2Background">
<img id="backgroundImage" src="img/bureau.png">
<div class="computer">
<a class="computerHover"></a>
</div>
</div>
</div>
Seems to me, what you are trying to do, is an image map. But for the sake of your question, I will focus on one particular link.
The reason the click generated image disappears when you move the mouse, is because it is still bound to the previous hover event. The hover method is a shortcut for mouseenter and mouseleave. In order to circumvent that, you need to unbind that event handler.
EDIT:
I reworked my answer to more closely resemble the code in your question. In order to "reset" the image, I would suggest using a link that the user can click to make it less confusing for them.
function switchImage() {
$(".computerHover").hover(function() {
$("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=Computer');
},
function() {
$("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=Office');
});
}
// attach the hover events when page loads
switchImage();
$(".computerHover").on("click", function() {
$(this).off("mouseenter mouseleave");
$("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=New Background');
});
// reattach hover handlers and set image back to default
$(".reset").on("click", function() {
switchImage();
$("#backgroundImage").attr('src', 'http://via.placeholder.com/300x300.png?text=Office');
});
#pagina2 {
width: 100%;
height: 100%;
}
#backgroundImage {
height: 100vh;
width: 100vw;
z-index: 0;
display: block;
}
.computerHover {
width: 105px;
height: 75px;
position: absolute;
right: 28vw;
top: 40vh;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="pagina2">
<div id="pagina2Background">
<a class="reset">Start Over</a>
<img id="backgroundImage" src="http://via.placeholder.com/300x300.png?text=Office">
<div class="computer">
<a class="computerHover">Computer</a>
</div>
</div>
</div>
To do what you want you'll need to keep some sort of state that indicates that the user clicked instead of just hover. In the click handler you could add a class or data-* to #backgroundImage element that you later check when you un-hover.
Example codesanbox.
I need to change an image of one div while hovering over another. So far i have this
$('#button').on({
'hover': function(){
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png');
}
});
DEMO
But it doesn't work..
EDIT While it works in fiddle, the solution does not work in my local file.
Hover is deperecated with latest versions of jQuery. it is divided into two events mouseenter and mouserleave. use those event it will be helpful
As of 1.9, the event name string "hover" is no longer supported as a
synonym for "mouseenter mouseleave". This allows applications to
attach and trigger a custom "hover" event. Changing existing code is a
simple find/replace, and the "hover" pseudo-event is also supported in
the jQuery Migrate plugin to simplify migration. Reference
$('#button').on({
'mouseenter': function(){
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png');
}
});
$('#button').on({
'mouseleave': function(){
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/some_other.png');
}
});
If you still want to use hover events then there is direct hover function provided by jQuery, with reference
$( "td" ).hover(
function() {
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png');
}, function() {
// change to default on hover out
}
);
Looks like you need to change it on mouseover and reset on mouseout. If you use data-* attribute it will be easier.
$('#button').hover(function() {
var img = $('#ekranasStatic').data('toggle-src');
$('#ekranasStatic').attr('src', img);
}, function() {
var img = $('#ekranasStatic').data('original-src');
$('#ekranasStatic').attr('src', img);
});
.img {
/*** TURI BUT 850 PX **/
position: absolute;
margin-left: 520px;
top: 110px;
z-index: 99;
}
#button {
width: 50px;
height: 70px;
display: block;
position: absolute;
top: 296px;
left: 1120px;
background: url("http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/knopkes_zpsp3qr4xyn.png") no-repeat;
z-index: 2200;
cursor: pointer;
}
#button:focus {
outline: none;
}
#button:hover {
animation: knopke 0.1s steps(2);
animation-fill-mode: forwards;
background-position: 0 0;
}
#keyframes knopke {
to {
background-position: -100px;
opacity: 1;
}
}
#ekranasStatic {
width: 735px;
height: 602px;
display: block;
position: absolute;
top: 120px;
left: 375px;
z-index: 10000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<img class="img" src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/galerija3_zpszlnkhebp.png">
<div id="button"></div>
<div id="ekranai">
<img id="ekranasStatic" src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranasStatic_zpswrnrw7f8.png" data-original-src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranasStatic_zpswrnrw7f8.png" data-toggle-src="http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png"
/>
</div>
Updated Fiddle
change this
$('#button').on({
'hover': function(){
to :
$('#button').hover({ function(){ });
try this :
$('#button').on('hover', function () {
$('#ekranasStatic').attr('src', 'http://i1064.photobucket.com/albums/u378/Benas_Lengvinas/ekranas_zpsczoquizc.png');
}
);
Js Fiddle Updated
This probably cannot be done, but I have a fixed-position div on top of inline html in the page body. The inline html has clickable elements, and the fixed div has a hover event.
The fixed element is an empty div, so it is invisible.
Currently, the fixed element is blocking click events on the item under it.
Is it possible?
This solution is too complicated
https://stackoverflow.com/a/9616491/209942
Possible solution?
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
Thx
The fixed element should not be prevent the clicks from the item under it unless you are stopping the event propagation.
See this fiddle: https://jsfiddle.net/pv0mygz5/
-- it demonstrates that without event.stopPropagation the event should be intercepted by the listener on the span element.
$('#click-me').on('click', function (e) {
console.log('click triggered');
});
$('.box').on('mouseover', function (e) {
//don't stop event from bubbling
console.log('hover triggered');
});
Could you also include a code snippet that demonstrates your problem?
although IE10 doesn't support it you can use
pointer-events: none;
http://jsfiddle.net/leaverou/XxkSC/light/
In this fiddle you can see a drop down being covered with other elements, the other elements has pointer-events: none so you can click on the arrow down button and the click actually goes to the select element itself.
BR,
Saar
You can also try using z-index. Depending on your layout it may not be a solution, but if your front div is invisible, then it shouldn't create unwanted effect. Like this for example:
document.querySelector('#under').addEventListener('click', function(e) {
e.target.style.color = "blue";
});
document.querySelector('#notunder').addEventListener('click', function(e) {
e.target.style.color = "blue";
});
#fix {
width: 60px;
height: 200px;
position: fixed;
z-index: -1;
top: 0px;
border: 1px solid black;
}
#under {
display: inline;
}
#fixnozindex {
width: 100px;
height: 200px;
position: fixed;
left: 75px;
top: 0px;
border: 1px solid black;
}
#notunder {
display: inline;
}
<div id="fix"></div>
<div id="under">Clickable</div>
<div id="fixnozindex"></div>
<div id="notunder">Not clickable</div>
I am attempting to apply a tint of #e30009 on hover of some images.
I tried with Javascript and a div that was placed over the image, however the overlay kept flashing on mouseover?.
See my JSFiddle: http://jsfiddle.net/vX96M/
$(document).ready(function() {
overlay = $("#overlay");
img = $('#rob');
overlay.width(img.css("width"));
overlay.height(img.css("height"));
overlay.css("top", img.offset().top + "px");
overlay.css("left", img.offset().left + "px");
overlay.css('opacity',0);
$('#rob').delay(500).hover(function() {
$('#overlay').fadeTo('slow',0.9);
})
})
I also tried with pure CSS but I cannot seem to achieve the correct color. I did:
img:hover { -webkit-filter: sepia(90%) hue-rotate(90deg); }
Best bet here is to probably set the overlay as "display:none;", delegate the events and then use an addClass vs removeClass function. Main issue is that the overlay is interfering with the mouseover events, so just add another function for that. See jsfiddle below:
http://jsfiddle.net/vX96M/2/
$(document).on('mouseenter', "#myimg", function () {
$('#overlay').addClass("show-as-block");
}).on('mouseleave', "#myimg", function () {
$('#overlay').removeClass("show-as-block");
});
$(document).on('mouseenter', "#overlay", function () {
$('#overlay').addClass("show-as-block");
}).on('mouseleave', "#overlay", function () {
$('#overlay').removeClass("show-as-block");
});
Also should set the width and height of the overlay and then have a class to display as block.
.overlay {
display: none;
position: absolute;
border-radius: 50%;
background-color: rgba(200, 100, 100, 0.5);
top: 0px;
left: 0px;
width: 0px;
height: 0px;
width:280px;
height:280px;
z-index:0;
}
.show-as-block {
display:block;
}