Effetti MouseOver DIV

**xares** · 18-09-2018, 17:31

Buonasera

mi serve creare una pagina con un elenco di DIV.
Al passaggio del mouse sopra ognuno lo stesso si evidenzia e dovrebbe apparire una immagine nel bordo superiore destro (che se cliccata esegue altre azioni).

Ho provato con il codice che segue ma, mentre appare e scompare l'icona al passaggio del mouse, se sposto il puntatore sopra l'icona lo stesso inizia a lampeggiare passando da freccia a manina (cursor).

A cosa è dovuto? Dove sbaglio? Come rimediare?

Grazie

codice HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Effetto DIV</title>

	<style>
		.box {
			position: relative;
			margin: 70px auto 35px auto;
			width: 300px;
			height: 150px;
			border: #C0C0C0 1px solid;
			border-radius: 7px;
		}
		
		.box:hover {
			border: #BFBFBF 1px solid;
			border-radius: 7px;
			box-shadow: 0px 0px 5px 2px #00bfff;
		}
		
		.x {
			position: absolute;
			display: block;
			top: 5px;
			right: 5px;
		}
		
		.x a {
			text-decoration: none;
		}
		
		.x img {
			width: 16px;
		}
	</style>
	
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('.box').mouseover(function(){
				$(this).append('<span class="x"><a href="#"><img src="images/edit.png"
alt="edit" /></a></span>');
			});
			
			$('.box').mouseout(function(){
				$(this).children('.x').remove();
			});
		});
	</script>
</head>
<body>
	<div id="box-1" class="box"></div>
	<div id="box-2" class="box"></div>	
</body>
</html>