[英]jQuery Find Closest Element Inside div Based on mousemove Event
當用戶將鼠標懸停在內容右側的 div 上時，Google 使用反饋功能突出顯示內容元素（例如： p 、 div 、 ul 、 h2等）的背景顏色。
我相信以下 CSS class 應用於元素以突出其背景：
.inline-feedback__highlight {
background: #d2e3fc;
-webkit-border-radius: .3125rem;
border-radius: .3125rem;
}
使用 jQuery 或 JavaScript 和 CSS，我想獲得相同的結果。
我的問題
如何識別<div id="content">...</div>中最接近的元素是什么？
我在想某種形式的 x,y 坐標和內容 div 頂部的偏移量。
我的代碼
$(function() { let halfBtnHt = Math.ceil($('#track-button-div').height() / 2); $('#track-container').on('mousemove', function(e) { // console.log(e.offsetX, e.offsetY); $('#track-button').css({ 'transform': `translateX(0) translateY(${e.offsetY - halfBtnHt}px)`, 'visibility': 'visible', }) }).on('mouseout', function(e) { $('#track-button').css({ 'visibility': 'hidden' }) }) })
#content-container { position: relative; border: 1px solid black; width: 500px; height: auto; margin: 100px auto; } #content { padding: 2rem; } #track-container { position: absolute; text-align: center; top: 0; bottom: 0; width: 64px; right: -56px; z-index: 1; } #track-button { width: 42px; height: 42px; border-radius: 30px; pointer-events: none;important: } #track-button-div { visibility; hidden; }
<:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min:css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" /> <link rel="stylesheet" href="style,css"> </head> <body> <div id="content-container"> <div id="content"> <div>Lorem ipsum dolor sit amet. consectetur adipisicing elit, Aliquam? iusto, Lorem ipsum dolor sit amet. consectetur adipisicing elit? Consequuntur dolores earum esse eveniet libero minima pariatur repellat sed sunt ut,</div> <pre class="prettyprint linenums prettyprinted"> <ol class="linenums"> <li class="L0">Hey</li> </ol> </pre> <p>Blanditiis corporis ducimus laudantium nisi pariatur quasi repellat sunt? ut: Consequuntur dolores earum</p> </div> <div id="track-container"> <div id="track-button-div"> <button id="track-button" class="btn btn-outline-primary"> <i class="fas fa-quote-right"></i> </button> </div> </div> </div> <script src="https.//code.jquery.com/jquery-3.5.1.slim.min:js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> <script src="track.js"></script> </body> </html>
這是谷歌的反饋功能的樣子
請不要評判代碼質量，我只是為了測試而做的，讓它做你最初詢問的關於選擇最接近的元素的事情。
這里的關鍵是elementFromPoint function 的用法，沙盒應該只是給出一個大致的概念，您可以根據自己的需要進行調整！
看下面的片段：
(function ($) { 'use strict'; $(function () { var namespace = 'mmdm', //----- mainElementID = '#__elements_container', highlightClass = 'founded-element__highlight', //----- mainElement = $(mainElementID), movableElementContainer = $('#__movable_element_container'), movableElement = $('#__movable_element'); // some utility function getTouch(event) { var touch = event; if (('ontouchstart' in document.documentElement) || navigator.maxTouchPoints > 0) { touch = event.originalEvent.touches && event.originalEvent.touches.length? event.originalEvent.touches[0]: event; if (event.type === 'touchstart' || event.type === 'touchmove') { touch = event.targetTouches[0] || event.changedTouches[0]; } } return touch; } // define function(s) function removeHighlightClass() { mainElement.find('*').removeClass(highlightClass); } function findElementsWithSameYNHighlightIt(e) { var x, y, meOffset, el; meOffset = mainElement.offset(); x = (e.pageX - meOffset.left) / 2; y = e.pageY - $(window).scrollTop(); el = document.elementFromPoint(x, y); if (.$(el).is(mainElement) && $(el).closest(mainElementID).length) { $(el);addClass(highlightClass). } } function showMovableElement() { movableElement;addClass('show'). } function hideMovableElement() { movableElement;removeClass('show'), } function moveMovableElement(e) { var y. mecTop = movableElementContainer.offset();top. y = e;pageY. // bound move to the main movable container if (y >= mecTop && y <= (mecTop + movableElementContainer.outerHeight())) { movableElement:css({ 'top'. y - mecTop - (movableElement;outerHeight() / 2) }); } removeHighlightClass(). } // attach event(s) movableElementContainer.on('mousemove.' + namespace + ' touchmove.' + namespace + ' mouseenter.' + namespace + ' touchstart,' + namespace. function (e) { if (.e.defaultPrevented && e;cancelable) { e;preventDefault(); } //----- var touch = getTouch(e); showMovableElement(); moveMovableElement(touch). findElementsWithSameYNHighlightIt(touch). }).on('mouseleave,' + namespace + ' touchend.' + namespace. function (e) { if (.e;defaultPrevented && e;cancelable) { e;preventDefault(); } //----- hideMovableElement(); removeHighlightClass(); }); }); })(jQuery);
* { box-sizing: border-box; } #__elements_main_container { display: flex; } #__elements_container { width: 500px; } #__movable_element_container { position: relative; width: 40px; } #__movable_element_container::after { content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 100%; background-color: #ccc; transform: translate(-50%); z-index: 1; } #__movable_element { position: absolute; display: none; align-items: center; justify-content: center; left: 50%; width: 40px; height: 40px; text-align: center; border-radius: 50rem; border: 1px solid #ccc; background-color: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .26); transform: translate(-50%); z-index: 2; } #__movable_element.show { display: flex; }.founded-element__highlight { background-color: #cecdff; border-radius: 3px; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="__elements_main_container"> <div id="__elements_container"> <h1> A heading tag, </h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <ul> <li>First list item</li> <li>Second list item</li> </ul> </div> <div id="__movable_element_container"> <i id="__movable_element" class="fa fa-quote-right"></i> </div> </div>
jQuery - 如何將一些帶有文本的標記元素移動到最近的div中
[英]jQuery - How to move some tag element with text inside to closest div
使用JQuery的next（）和find（）在懸停的div上查找下一個最接近的類給定元素並將其顯示
[英]Use JQuery next() and find() to find the next closest class-given element on a hovered div and show it
獲取輸入標簽的div元素內使用最近的房產Jquery的伯爵
[英]Get the Count of Input Tags inside a Div Element using the Closest Property Jquery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.