Salve a tutti,
sto cercando di risolvere un problema per un tool che dovrei fare, ma un qualcosa mi ha bloccato in partenza. In pratica l'evento "onmouseout" non viene attivato come vorrei, ovvero quando esco il cursore si sposta al di fuori del div.
Essendo la pagina in fase di struttura, ho ovviamente usato una modifica del box come testing, ovvero il cambio del bordo del singolo del div al passaggio del mouse. Il mio problema, è che l'evento contrario, quello che dovrebbe far tornare tutto normale e riportare il bordo dei singoli div alla normalità, non viene attivato.Codice PHP:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script language="javascript" type="text/javascript">
function MOver(ct) {
var container = document.getElementById("C" + ct);
container.style.border = "5px double black";
}
function MOut(ct) {
if (event.srcElement.tagName == "div") {
alert("entra");
var container = document.getElementById("C" + ct);
container.style.border = "1px double solid";
}
}
/*function MUp() {
alert("prova");
for (i = 1; i > 4; i++) {
if (i != ct) {
var container = document.getElementById("C" + i);
container.style.border = "1px double solid";
}
}
}*/
</script>
<style type="text/css">
.container1
{
border: 1px solid black;
width: 300px;
height: 180px;
border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
float: left;
margin: 5px 5px 5px 5px;
}
.container2
{
border: 1px solid black;
width: 275px;
height: 165px;
border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
float: left;
margin: 5px 5px 5px 5px;
}
.container3
{
border: 1px solid black;
width: 250px;
height: 150px;
border-radius: 8px 8px 8px 8px;
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
float: left;
margin: 5px 5px 5px 5px;
}
</style>
</head>
<body>
<div id="main">
<div class="container3" id="C1" onmouseover="MOver(1)" onmouseout="MOut(1)">
</div>
<div class="container2" id="C2" onmouseover="MOver(2)" onmouseout="MOut(2)">
</div>
<div class="container1" id="C3" onmouseover="MOver(3)" onmouseout="MOut(3)">
</div>
<div class="container2" id="C4" onmouseover="MOver(4)" onmouseout="MOut(4)">
</div>
<div class="container3" id="C5" onmouseover="MOver(5)" onmouseout="MOut(5)">
</div>
</div>
</body>
</html>
Nel web ho trovato parecchi problemi simili, riguardanti però elementi all'interno del div, non il div stesso.
Qualcuno saprebbe aiutarmi?
Grazie in anticipo per le risposte.
Rispondi quotando