Sveiki,
gal galit paaiškinti kaip čia gaunasi, kad užėjus su pele ant pirmojo
teksto paveiksliukas atsiranda, bet nedingsta. Užėjus ant antrojo teksto
paveiksliukas atsiranda tik antrą kartą ant jo užėjus su pele?
Pirmas su jQuery, antras su Javascriptu.
Index
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://code.jquery.com/jquery-1.11.3.js"
type="text/javascript"></script>
<script src="js/ajax.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="pirmas">PIRMAS</div>
<br>
<div class="antras" onmouseover="mouseOver()">ANTRAS</div>
</body>
</html>
Javascript
$(document).ready(function() {
Pirma();
});
function Pirma() {
$(".pirmas").on({
mouseenter : function() {
$("body").append("<p id='#preview2'><img src='img/pirmas.jpg'/></p>");
},
mouseleave : function() { //kodėl nepanaikina???????????
$("#preview2").remove();
}
});
}
function mouseOver(){
xOffset = 10;
yOffset = 30;
$(".antras").hover(function(e){
$("body").append("<p id='preview'><img
src='img/antras.jpg'/></p>");
$("#preview")
.css("top",(e.pageY - xOffset ))
.css("left",(e.pageX + yOffset))
fadeIn("fast");
},
function(){$("#preview").remove(); //isejus dingsta foto
});
$(".antras").mousemove(function(e){
$("#preview")
.css("top",(e.pageY -e.clientY/2))
.css("left",(e.pageX + yOffset));
});
}
CSS
#preview {
position: absolute;
border: 1px solid #ccc;
background: #333;
padding: 1px;
display: none;
}