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>