Question

我想建立一个网站，我可以通过悬停在其上来识别组件。例如 - 如果我们将鼠标悬停在图像上，则应将其标识为工具提示中的图像。如果我们将鼠标悬停在具有图像和文本的div上，则应将其标识为图像文本组件等。

Answer 1

以下是显示文本工具提示和图像工具提示以及文本和图像工具提示的示例。

您可以通过jQuery工具提示UI轻松更改内容。

$(document).ready(function() {
   $("#image").tooltip({ content: '<img src="https://image.flaticon.com/icons/png/128/883/883371.png" />' }); 
   $("#text").tooltip({ content: 'simple text' }); 
    
   $("#imageandtext").tooltip({ content: '<span>simple text</span><br/><img src="https://image.flaticon.com/icons/png/128/883/883371.png" />' }); 
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div>
    <a id="text" href="#" title="" >show text</a>
</div>
<br/>
<div>
    <a id="image" href="#" title="" >show image</a>
</div>
<br/>
<div>
    <a id="imageandtext" href="#" title="" >show image and text</a>
</div>

Answer 2

您列出的两个示例是不同的 - 一个只显示您正在悬停的元素，而另一个显示其子元素。

无论如何，element.tagName方法（docs）对您来说应该很方便。

此外，如果img内有div，并且您将鼠标悬停在img上，则可以使用target和{显示这两个元素的信息{1}}您在mouseover事件中获得的事件对象的属性。 Info here.

我相信你必须将一个事件监听器附加到你想要触发的每个元素上，而不仅仅是整个父元素 - 所以你必须选择你感兴趣的所有元素，然后循环它们。

Answer 3

<div class="col-xs-4 col-xs-offset-4">
<i class="fa fa-quote-left" aria-hidden="true"></i><p>text here text here text here text here text here text here text text here text here text here text here text here text here text here text here text here text here text here text here text text here text here text here text here text here text here text here text here text here text here text here text here text text here text here text here text here text here text here text here text here text here text here text here text here text text here text here text here text here text here text here text here text here text here text here text here text here text text here text here </p><i class="fa fa-quote-right" aria-hidden="true"></i>
</div>

$(document).ready(function () {
  $('.checkOnHover').hover(function() {
    var elem = $(this).html();//inner elements of div
    
  } //Handler when mouse entered
});

识别网页中的内部标记

3 个答案: