鼠标输入和鼠标输出事件以显示边框

Mousenter and mouseout event to show border

本文关键字：鼠标 显示 边框 输出 输入 出事件      更新时间：2023-09-26

我有以下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>

当mousenter出现在html中的任何元素上时，我只想在鼠标悬停的元素上显示红色边框。当前代码为：

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

但是，当我的鼠标进入图像A时，包含图像A的段落带有与图像A的边框。我只希望图像A具有边框。有人能建议我怎么做吗？

使用此

http://jsfiddle.net/bBx2z/

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

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

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

尝试添加event.stopPropagation();

工作演示

我想你想要这个

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

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

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

你的CSS：

.bordered {
  border:1px solid red;
}

使用

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

$(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;
}
相关文章：