我试图在jquery中使用鼠标悬停事件，但遇到了一些麻烦

我有一个10人的图像，我想在网页上添加。但我想使用鼠标事件jquery，以便当我将鼠标移动到人脸时，它会向我显示一个小文本框，旁边是他的名字。有没有任何可能的方法来做到这一点？我试图在jquery中使用鼠标悬停事件，但遇到了一些麻烦

2017-06-01 Ali

你可以做到这一点，如果你能找出每个人的箱子坐标和显示名称鼠标指针在那个时刻的盒子（人物）的位置。鼠标事件只能告诉你鼠标指针的x，y坐标 - 但你需要找出面部的坐标。 – Yatin

.container { 
 
    position: relative; 
 
    width: 50%; 
 
} 
 

 
.image { 
 
    opacity: 1; 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    transition: .5s ease; 
 
    backface-visibility: hidden; 
 
} 
 

 
.middle { 
 
    transition: .5s ease; 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%) 
 
} 
 

 
.container:hover .image { 
 
    opacity: 0.3; 
 
} 
 

 
.container:hover .middle { 
 
    opacity: 1; 
 
} 
 

 
.text { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    font-size: 16px; 
 
    padding: 16px 32px; 
 
}

<div class="container"> 
 
    <img src="https://www.w3schools.com/w3css/img_avatar3.png" alt="Avatar" class="image" style="width:100%"> 
 
    <div class="middle"> 
 
    <div class="text">John Doe</div> 
 
    </div> 
 
</div>

如果我是正确的，你想somethink这样你可以achive this用CSS

来源

2017-06-01 04:36:26

不完全是我想要的，但这将完美工作。感谢您的帮助。 – Ali

我试图在jquery中使用鼠标悬停事件，但遇到了一些麻烦

回答

相关问题