2013-05-08 1 views
0

child div에서 마우스 아웃 효과를 제거해야합니다.Child Div에 대한 마우스 오버 효과 --- 해결 방법 필요

이 코드를 그대로 사용하면 문제를 이해할 수 있습니다. 여기

내 코드입니다 :

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div> 

<script> 
function mOut(obj) 
{ 
obj.innerHTML="Thank You" 
} 

function mOver(obj) 
{ 
obj.innerHTML='<table style=" border:solid 1px #ff0000;"><tr><td><label>Username</label><input type="text" name="username" id="username" maxlength="64" value="SwapnilC" autocomplete="off"><br/><label for="pass">Password</label><input type="password" name="pass" id="pass" value="Password"></div><div style=" float:right;width:90px;background-color:#933;" onClick="ClickLogin();">Login</div><div style="float:right; margin-right:10px; width:20px; padding-top:4px;"> <img id="PP_loading" title="Processing Request" style="display:none;" src="images/ajaxProcess.gif" /> </td></tr></table>' 
} 
</script> 

</body> 
</html> 

답변

0

대신, 마우스 오버에 HTML 마크 업을 추가/숨기기/아웃

자바 스크립트를 통해 마우스의 테이블을 표시하는 클래스를 사용하지 마십시오 :

function mOut(obj) 
{ 
    obj.style.display="none"; 
} 

function mOver(obj) 
{ 
    obj.style.display="block" 
} 
0

"Tahnk you"와 div 안에 직접 테이블. 그런 다음 테이블 숨김 ("display : none")을하고 필요시 가시성을 전환하십시오. span display : none | inline; 테이블 디스플레이 : 없음 | 블록;

그리고 모든 것은 CSS를 사용하여 수행 할 수 있습니다.

0

당신이 사용할 수있는

this jQuery를 : .removeAttr (여기서 attributeName) 기능을 제공합니다.

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
</head> 
<body> 
    <button>Change title</button> 
<input type="text" title="hello there" /> 
<div id="log"></div> 

<script> 
(function() { 
    var inputTitle = $("input").attr("title"); 
    $("button").click(function() { 
    var input = $(this).next(); 

    if (input.attr("title") == inputTitle) { 
     input.removeAttr("title") 
    } else { 
     input.attr("title", inputTitle); 
    } 

    $("#log").html("input title is now " + input.attr("title")); 
    }); 
})(); 
</script> 

</body> 
</html> 
관련 문제