鼠标悬停、鼠标移动和悬停不起作用

mouseover, mousemove and hover is not working

本文关键字：鼠标 悬停 不起作用 移动      更新时间：2023-09-26

这是我的示例代码，我想通过它显示一组子应用程序。我想为 Mainapp1 和 Mainapp2 显示一组不同的硬编码值。

<table>
  <tr>
    <th class="althead" style="border: 0px;width:8%" >MainApp1</th>
    <th class="althead" style="border: 0px;width:7.5%">MainApp2</th>
  </tr>
</table>  

<div class="Not_Editable">Application1</br>
   Application2</br> Application3<br>Application4<br> Application5<br> Application6<br>
</div>

我的Javascript如下：

<script type="text/javascript">
   (function (){
     alert("mouse over function");
     $('.althead').mouseover(function (e) {
     alert("mouse over calling");
     $('.Not_Editable').css('top', (e.clientY + 10) + 'px').css('left',  (e.clientX + 10) + 'px').show();
   }).mouseout(function () {
     alert("mouse out");
     $('.Not_Editable').hide();   
   });
})();

我的CSS很好，如下所示：

.Not_Editable {
  display:none;
  position:absolute;
  background-color: #292929;
  width: 200px;
  height: 200px;
  line-height: 30px;
  color: white;
  text-align: center;
  border-radius: 10px;
  font-family: sans-serif;
}

只需在代码的 head 部分添加 jquery 引用即可。您可以使用 jQuery CDN 作为在线参考。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

您正在使用jQuery，并且似乎没有将jQuery库添加到您的网站。

您可以通过在 html 中插入以下代码来添加它：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

顺便说一句，alert（"鼠标悬停函数"）被调用是因为它是一个javascript函数，不需要jQuery。

相关文章：