Hello, dear Masters of the Universe,
i hope you can help. I have the following custom js, to make the ".below-image" -class of project-thumbnials follows the cursor: (my working pen: https://codepen.io/pingundpong/pen/abJmxQy)
adapted to lay theme like this:
<script>
window.laytheme.on("newpageshown", function(layoutObj, type, obj){
jQuery(document).on("mousemove", function (e) {
jQuery(".below-image").css({
left: e.pageX,
top: e.pageY
});
});
});
</script>
and the css:
.below-image {
display: none;
width: 420px;
margin-left: 10px;
position: absolute;
font-weight: 700;
color: #000;
z-index:80;
}
a:hover .below-image{
display: block;
}
It looks like the absolute positioning gets ignored.
I also tried with jQuery(element).on() but without success.
do you have any idea how I can solve it?
or is the way i do this just the wrong approach to achieve the goal?
you can check the behaviour with lay theme on my project page:
http://querfeld.pingundpong.de/mousefollow-test/
many thanks for helping!
regards, Axel