0

我有以下html结构：

         <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>

当 html 中的任何元素发生 mouseenter 时，我只想为鼠标所在的元素显示红色边框。当前的代码是：

       $("*").mouseenter(
                  function(){
                     $(this).css("border","solid red");
        }).mouseleave(
                function(){
                     $(this).css("border","none");
        });

但是，当我的鼠标进入图像 A 时，包含图像 A 的段落带有与图像 A 的边框。我只希望图像 A 具有边框。谁能建议我如何去做这件事？

4

7 回答 7

1

尝试添加event.stopPropagation();

于 2013-07-31T05:06:31.410 回答
1

用这个

http://jsfiddle.net/bBx2z/

$("p:first").mouseenter(
                  function(){
                     $(this).css("border","solid red");
        }).mouseleave(
                function(){
                     $(this).css("border","none");
        });
于 2013-07-31T05:04:57.637 回答
1

鼠标事件会冒泡，这意味着它们也会为元素的父级触发。您可以使用停止事件的冒泡stopPropagation()

$("*").mouseenter(
              function(e){
                 e.stopPropagation();
                 $(this).css("border","solid red");
    }).mouseleave(
            function(e){
                 e.stopPropagation();
                 $(this).css("border","none");
    });
于 2013-07-31T05:05:32.593 回答
0 
$(document).ready(function(){
$('div').mouseenter(function(){
    $(this).addClass('border');
});
$('div').mouseleave(function(){
    $(this).removeClass('border');

});

});

css

.border{
border-width:3px;
border-style:solid;
border-color:#ff9900;
}
于 2013-07-31T05:15:32.597 回答
0

更好的方法是添加一个显示元素周围边框的类：

$(function(){
  $(elem).on({
    mouseenter:function(){
      $(this).addClass("bordered");
    },
    mouseleave:function(){
      $(this).removeClass("bordered");
    },
  });
})

而你的CSS：

.bordered {
  border:1px solid red;
}
于 2013-07-31T05:06:08.000 回答
0

利用

   $("img").mouseenter(
              function(){
                 $(this).css("border","solid red");
    }).mouseleave(
            function(){
                 $(this).css("border","none");
    });
于 2013-07-31T05:06:25.043 回答
0

工作演示

我想你想要这个

将鼠标悬停在 上p并在其上创建边框p

 $("div p").mouseenter(

 function () {
     $(this).css("border", "solid red");
 }).mouseleave(

 function () {
     $(this).css("border", "none");
 });

将鼠标悬停在 上image并在其上创建边框image

 $("div p img").mouseenter(

 function () {
     $(this).css("border", "solid red");
 }).mouseleave(

 function () {
     $(this).css("border", "none");
 });

或者你可以使用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");
});
于 2013-07-31T05:04:26.793 回答