Question

我想在'mousemove'事件上显示我自己的描述，当我将鼠标移到图像上时，该事件会随着我的鼠标指针移动。

但它不起作用

以下是html code

<!DOCTYPE html>
<html lang="en">
    <head>
         <title>
         </title>
         <meta charset="utf-8" />
         <link rel="stylesheet" type="text/css" href="css/custom.css" />
    </head>
    <body>
        <div>
            <img src="images/wolwerine.jpg" alt="Wolverine" hovermytext="She is doubting my capabilities." class="wolverineClass" id="wolverineId" />
        </div>  
        <div class="wolverineHoverText">
        </div>      
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <script type="text/javascript" src="js/custom.js" ></script>
    </body>
</html>

以下是custom.css代码

.wolverineHoverText{
    height: 40px;
    width: 300px;
    position: absolute;
    padding: 40px 80px;
    border: 1px solid #106c90;
    background: #da8808;
    display: none;
    color: #ffffff; 
    font-size: 20px;
    top:20px;
    left:20px;
}
img{
    height: 600px;
    width: 900px;
    opacity: 0.5;
}

以下是custom.js代码

$(document).ready(function(){
    $('.wolverineClass').mousemove(function(y){
        var x = $(this).attr('hovermytext');
        $('#wolverineHoverText').text(x).show();
        $('#wolverineHoverText').css('top',y.clientY+10).css('left',y.clientX+10);
    }).mouseout(function(){
            $('#wolverineHoverText').hide();
        });
});

以下是https://www.youtube.com/watch?v=_GrWaN05-Vs&index=51&list=PL6B08BAA57B5C7810

的链接

我是jquery的初学者。

请在下面评论任何查询。

Answer 1

这是一个有效的解决方案。希望它有所帮助！

$(document).ready(function(){
    $('.wolverineClass').mousemove(function(y){
        var x = $(this).attr('hovermytext');
        $('#wolverineHoverText').text(x);
        $('#wolverineHoverText').css('top',y.clientY+10).css('left',y.clientX+10).show();
    }).mouseout(function(){
            $('#wolverineHoverText').hide();
        });
});

.wolverineHoverText{
    height: 40px;
    width: 300px;
    position: absolute;
    padding: 40px 80px;
    border: 1px solid #106c90;
    background: #da8808;
    display: none;
    color: #ffffff; 
    font-size: 20px;
    top:20px;
    left:20px;
}
img{
    height: 150px;
    width: 400px;
    opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 
<div>
   <img src="images/wolwerine.jpg" alt="Wolverine" hovermytext="She is doubting my capabilities." class="wolverineClass" id="wolverineId" />
</div>  
<div id="wolverineHoverText" style="display:none"></div>

通过jquery对mousemove事件的持续描述

1 个答案: