javascript - Mousenter and mouseout event to show border -
i have following html structure:
<div> <p>name <img src="url" alt="image a"></p> <p>age <img src="url" alt="image b"> </p> <p><img src="url" alt="image c"></p> </div> when mousenter happens element in html, want show red border element mouse over. current code is:
$("*").mouseenter( function(){ $(this).css("border","solid red"); }).mouseleave( function(){ $(this).css("border","none"); }); however when mouse enters image paragraph holds image comes border image a. want image have border. can suggest how can go doing this?
i think want
hover on p , create borders on p
$("div p").mouseenter( function () { $(this).css("border", "solid red"); }).mouseleave( function () { $(this).css("border", "none"); }); hover on image , create borders on image
$("div p img").mouseenter( function () { $(this).css("border", "solid red"); }).mouseleave( function () { $(this).css("border", "none"); }); or can use e.stoppropagation();
$("*").mouseenter( function (e) { e.stoppropagation(); $(this).css("border", "solid red"); }).mouseleave( function (e) { e.stoppropagation(); $(this).css("border", "none"); }); $("*").mouseenter( function (e) { e.stoppropagation(); $(this).parents('div').css("border", "none"); $(this).parents('p').css("border", "none"); $(this).css("border", "solid red"); }).mouseleave( function (e) { e.stoppropagation(); $(this).parents('div').css("border", "none"); $(this).parents('p').css("border", "none"); $(this).css("border", "none"); });
Comments
Post a Comment