Question

我有以下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(
                  function(){
                     $(this).css("border","solid red");
        }).mouseleave(
                function(){
                     $(this).css("border","none");
        });

然而，当我的鼠标进入图像A时，包含图像A的段落带有图像A的边框。我只想让图像A具有边框。谁能建议我怎么做呢？

Answer 1

使用此

http://jsfiddle.net/bBx2z/

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

Answer 2

鼠标事件会冒出来，这意味着它们也会触发元素的父母。您可以使用stopPropagation()

停止冒充活动

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

Answer 3

尝试添加event.stopPropagation();

Answer 4

Working Demo

我想你想要这个

将鼠标悬停在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();

Working Demo

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

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

Working Demo

$("*").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");
});

Answer 5

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

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

你的CSS：

.bordered {
  border:1px solid red;
}

Answer 6

使用

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

Answer 7

$(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;
}

鼠标悬停和mouseout事件以显示边框

7 个答案: