单击滚动条时，Chrome 悬停状态会被解除

Posted 2023-03-05

【中文标题】单击滚动条时，Chrome 悬停状态会被解除

【英文标题】：Chrome hover state gets dismissed when clicking on the scrollbar

【发布时间】：2018-01-14 19:25:18

【问题描述】：

我有以下（示例）html：

<div id="target">
  Hover me!
  <div id="magic">
    Significant amounts of HTML, enough to cause scroll
    Excluding to keep the post concise
  </div>
</div>

以及以下（示例）CSS：

#magic 
  display: none;
  width: 500px;
  height: 500px;
  overflow: auto;

#target:hover #magic 
  display: block;

您可以在这里查看示例：https://jsfiddle.net/hak8zuok/1/

重现步骤：

将鼠标悬停在“悬停我！”打开魔法面板的文字 快速点击滚动条数次

预期行为：

无论您点击多少次或多久，都不应解除悬停

实际行为：

很多时候，悬停被解除，悬停面板被关闭。

---

我已设法仅在 Windows 版 Chrome 上重现此内容。它不会在 Mac 或 Firefox 上重现。这让我相信这是 Chrome 中的一个实际错误。

我想知道是否有一种解决方法可以防止悬停关闭。

【问题讨论】：

打开魔法面板。它永远不会正确关闭它。但它会在 Hover me 的第一次悬停时打开！文字正确。

您不需要大量文本来模拟溢出内容 - 只需添加一个高度大于 #magic 的子元素。我猜在 Stack Snippet 中也会发生同样的行为。我也猜测这与 Chrome 的 :hover 实现通常有问题有关。

用 mouseenter/mouseleave 模拟悬停怎么样？ （隐藏）

@BenjaminGruenbaum 有趣的是，还是一样：jsfiddle.net/hak8zuok/2

jsfiddle.net/7tj5y1qh@MadaraUchiha 呢？

【参考方案1】：

CSS

我的第一个想法是将pointer-events: none; 应用于#magic div。这确实解决了您提到的问题，但也阻止了我完全与垂直滚动条进行交互，我猜这不好！

使用 jQuery 防止 #magic div 上的默认点击行为似乎可以解决问题。

jQuery 解决方案

$(document).ready(function() 
    $('#magic').click(function(e) 
        e.preventDefault();
    );
);

工作演示： https://jsfiddle.net/hak8zuok/5/

【参考方案2】：

试试这个代码：

#magic 
  display: none;
  width: 500px;
  height: 500px;
  overflow: auto;
  padding-right: 20px;

#target:hover #magic 
  display: block;

<div id="target">
  Hover me!
  <div id="magic">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, quaerat, quam! Minus, ipsam rerum magnam debitis! Accusamus praesentium, consequatur, repudiandae recusandae est sunt, ut nulla sint provident iusto repellat molestiae illum animi perferendis a maiores dolores omnis nobis aperiam velit quaerat adipisci quidem voluptates accusantium. Deleniti laudantium nesciunt, pariatur commodi. Natus cumque voluptatibus doloribus quae, atque quod soluta aliquid, perspiciatis blanditiis consectetur repellat quibusdam ratione impedit minus pariatur id at. Aperiam aliquam maxime fugiat explicabo. Ullam, fugiat labore architecto minus et magni neque quae nemo eligendi sit nesciunt blanditiis quaerat ipsum adipisci beatae tempore, aut, amet pariatur reiciendis quod porro? Rerum doloremque eveniet similique tempora! Ut alias enim ab illum magnam, hic repellendus et voluptates blanditiis libero sit dicta nulla. In pariatur sequi ullam laboriosam? Quo, tenetur quasi. Pariatur perferendis saepe, corporis deserunt libero earum ab iusto esse reiciendis! Officia deleniti beatae officiis molestias cupiditate sit autem pariatur cumque doloremque est fugiat ullam ut, atque facilis facere vel accusantium iste rem sint, nostrum dolorum eum voluptates repellendus libero velit. Quia cumque sed laborum porro facilis eius alias quis culpa, iste vitae hic magni minima officiis nisi, tenetur harum id totam quas sapiente soluta accusamus eum fugiat nihil? Dignissimos dicta, hic sed a odit, recusandae ipsa temporibus, praesentium eum commodi aliquid! Dolor molestias quo, ullam aliquam enim odio. Nemo dolores repellat, fuga aliquid beatae odit eaque necessitatibus aliquam reprehenderit. Quaerat dolore eum sapiente hic officiis ducimus libero, labore eaque asperiores ad quae provident suscipit beatae commodi quam nesciunt consectetur voluptatum porro id atque facere error sed, dolor, non. Numquam corporis consectetur cumque animi quia odit! Earum tempora necessitatibus sed explicabo veniam consectetur id, laboriosam velit aut quasi facilis numquam voluptates unde, nobis esse corrupti! Dolorem optio, possimus, explicabo tempore adipisci fugiat repellat quos aliquam hic reiciendis alias. Dolore numquam, deserunt nemo ipsa sequi nihil! Modi fuga nostrum debitis reiciendis, ab recusandae, perspiciatis ducimus sint dolorum repellendus laudantium porro maiores, reprehenderit earum ex provident, ea architecto dolores eveniet esse autem. Excepturi voluptate vitae cumque. Similique inventore quisquam assumenda repellendus tenetur ab dolores consequatur dolor perspiciatis commodi. Ex, at omnis quas nisi? Incidunt ex voluptates, culpa nesciunt cum quia aut asperiores cupiditate quo excepturi praesentium rerum adipisci quibusdam, ullam commodi recusandae, explicabo voluptatibus maiores qui earum! Dolore aspernatur sequi magni voluptatibus illum natus necessitatibus quia mollitia, vitae odit totam dignissimos consequatur eligendi perferendis laborum sit voluptatum corporis nostrum numquam fugit aut, perspiciatis quaerat delectus. Nisi temporibus assumenda, nam quod atque illum magni ullam nobis, porro aliquid consequatur. Soluta quasi eaque unde veritatis enim illum, animi fuga culpa minus sequi. Sequi corporis facere accusamus praesentium impedit iusto, suscipit nobis quos magnam similique ab dicta optio est sapiente. Non dignissimos laborum eveniet consectetur nobis maxime fugit officiis accusamus sapiente modi incidunt, quisquam voluptatem, earum, cumque repudiandae, alias cupiditate commodi vero iure eaque vel aliquam! Ipsam fuga consectetur vel aliquid, labore facilis incidunt iusto, animi blanditiis. Cupiditate dolor, voluptatum saepe molestiae quo consequatur esse aperiam repellat natus doloremque, ducimus maxime accusamus, suscipit magni voluptatem cumque inventore.</p>
    <p>In nobis sapiente officiis suscipit non velit laboriosam blanditiis quas corrupti aut esse repudiandae quidem, at perferendis impedit nulla libero, placeat odit culpa eum labore eius minus? Harum error excepturi quos earum quam cumque dicta maxime et numquam saepe, sequi voluptates praesentium totam ea eveniet quasi aliquam repellat, ipsa consequatur ducimus natus iure, vel. Soluta, necessitatibus? Velit aut, minima esse, voluptate officia incidunt amet hic quos, omnis distinctio iure vero, eum explicabo excepturi consectetur provident. Dolore quam laborum ratione expedita praesentium, labore at eveniet beatae. Quibusdam fugit recusandae placeat! Expedita praesentium aliquid delectus assumenda aut reiciendis tenetur rerum voluptatum rem reprehenderit cum ea deserunt ipsum, veritatis, ipsa repudiandae. Officiis iste illum placeat, eum at reprehenderit voluptates est corporis cupiditate nesciunt debitis incidunt iusto commodi. Quam facere cum in fugit, minus consectetur molestias. Vero minus, nostrum, impedit eaque corrupti, modi nobis laborum nemo laudantium obcaecati vitae iste illum temporibus. Hic quod esse tempora repellendus a tenetur, voluptatum doloribus ducimus dolores vel alias delectus quidem in necessitatibus ipsum odit, vero illo, quasi et nesciunt quis corporis saepe nostrum? Voluptate, qui, sint ex magni delectus rem fugiat debitis sequi nemo modi consequuntur cum doloremque nostrum iure velit commodi error fuga, ipsam illo distinctio iste ab. Numquam exercitationem aut, veniam, earum possimus, blanditiis, unde aliquam laboriosam eum tempora laborum. Necessitatibus nam voluptates consequatur cumque omnis veritatis, velit, iure aperiam minus quas harum quae nisi earum maiores molestias totam, optio reiciendis voluptatem quod. Quia minima error iure iusto mollitia veritatis culpa accusamus autem ipsa doloribus consequatur distinctio deserunt obcaecati quae, necessitatibus sequi laboriosam asperiores explicabo. Nobis quam, animi tenetur perferendis similique placeat sint asperiores, aperiam aut adipisci reprehenderit, voluptas atque omnis consectetur eius numquam doloremque. Provident quo officia architecto doloremque culpa omnis optio, at reprehenderit exercitationem asperiores, atque qui minima consectetur! Iusto autem, libero hic quisquam itaque suscipit fugiat aspernatur laboriosam perferendis dolores ratione iste sit nobis enim aperiam eligendi architecto unde magnam molestias dolorum excepturi, ullam, accusantium consectetur. Dolorum repellat porro ad pariatur, eos quam, magni architecto excepturi voluptas, ab provident, est dolores at. Nobis, deserunt recusandae, dolore quod, voluptatum maxime obcaecati ex quidem voluptatem fugit doloribus non placeat possimus, quaerat eligendi aspernatur quis minima. Qui nobis dolores saepe, neque consectetur facere repellendus omnis repellat fugit voluptatibus dolorem voluptatum a. Dicta sed placeat nisi deserunt. Maiores quia tempora maxime nihil fugit! Et cum deserunt assumenda, possimus harum tenetur enim sunt rem quae autem nesciunt quia animi non iure voluptates magni sit sed ipsum mollitia vero aut quasi, consequuntur alias. Hic quas cumque commodi repellendus doloremque rem, ut perferendis minus sit eius numquam ad maxime, id laborum, iste fuga obcaecati nulla dolorum a corporis asperiores. Recusandae laboriosam accusantium nesciunt, culpa possimus delectus velit maiores asperiores distinctio expedita qui sequi, eligendi modi autem aliquam laudantium nulla minus, quia odio veritatis rem. Fugiat mollitia optio omnis tenetur, vero sequi dolore repellat ratione quo laboriosam, non ut vitae error autem natus molestias perspiciatis unde a explicabo ab, commodi nobis! Amet quod quibusdam rem velit dicta iure doloribus sint.</p>
    <p>Rerum praesentium fugit debitis quis sunt optio molestiae, perspiciatis aspernatur, officia ut hic maxime! Odio aspernatur commodi facere rerum saepe, nihil cumque provident consequuntur ratione mollitia animi ab reiciendis aliquid excepturi, culpa deleniti nostrum sint fugiat quia. Dolorum deleniti quam possimus optio repudiandae doloremque iure quis illum ea praesentium ipsa aut quisquam est rem tempora ratione, corporis atque impedit eveniet beatae quae. Rerum asperiores nemo, velit at harum quae tempora suscipit accusamus iure dignissimos vitae voluptatem dolor culpa ipsa deleniti aut esse quia aliquid qui sunt ratione obcaecati numquam amet. Earum rerum soluta aliquam modi, nisi perspiciatis nulla, labore eius, voluptatum ipsam fugiat totam porro veniam! Nulla impedit voluptas nisi ullam provident dignissimos neque architecto a unde esse deserunt cupiditate ut nemo aperiam soluta minus iusto quam quod, beatae, velit magnam, animi! Placeat autem beatae dolores est distinctio sunt velit omnis expedita adipisci culpa odit eos, optio ullam nam perferendis numquam modi repudiandae ipsum eveniet similique cupiditate! Deserunt atque alias et non, voluptates saepe, excepturi fugit omnis velit quidem soluta, amet ducimus expedita debitis tempore quia, neque totam ea id quo earum officiis nostrum? Molestias molestiae eum magni fugiat at unde vitae blanditiis, nisi? Eos sint animi amet, expedita incidunt quis repellendus cum distinctio nobis consequatur, optio, quod aut inventore voluptatum reprehenderit culpa sed natus nostrum cumque ut enim quia placeat eum repellat. Voluptate ab incidunt fuga repellendus modi, cum beatae praesentium, rem consequatur provident ratione assumenda accusamus. Minus obcaecati delectus voluptate blanditiis nihil molestias alias sunt inventore tempore consequatur, odit officia officiis quaerat perferendis reiciendis magni ut aperiam possimus veritatis velit repudiandae, dolore. Architecto culpa temporibus laboriosam, nihil odit quia ullam libero nisi deserunt ipsam laudantium tenetur nemo. Dolorum dicta perferendis sapiente, voluptatum neque incidunt optio unde aliquid fugiat repellendus expedita non harum quas laboriosam esse? Ipsam, atque quo a maiores quia dignissimos alias consequuntur sed nostrum, culpa dolorem nihil blanditiis nam qui itaque nesciunt eum voluptatum commodi. Delectus non alias quas esse. Tenetur iusto dolorum commodi eligendi soluta, ad sit fugiat voluptas ex, repellendus mollitia ducimus, quibusdam perferendis eum cupiditate laudantium quis obcaecati reiciendis voluptates vitae modi ullam. Eaque est voluptatem recusandae consequatur magnam quasi dolores laborum ipsum, ea iste veritatis provident, odit eum. Mollitia atque repellat autem inventore beatae nesciunt quisquam eum quae. Doloremque aut maiores officiis placeat impedit nemo, ipsum modi aliquam, velit dolore error repellat saepe nulla dolor? Inventore iste, impedit libero! Asperiores error, aspernatur iste omnis rem placeat, molestiae velit! Distinctio sed, aliquid suscipit blanditiis maiores animi expedita repudiandae, temporibus eum vitae aspernatur, quos delectus. Veritatis voluptates quaerat laborum impedit, ad sunt libero ut iste odio ipsam error magni doloremque sapiente maxime aut assumenda numquam, id excepturi perferendis velit temporibus quibusdam dolore eligendi. Deleniti aperiam minima quam commodi tempora exercitationem eos? Aliquam deserunt cum, placeat quisquam eligendi corporis ipsa, vel quam. Ipsam optio inventore id, explicabo aliquid quod totam sequi, fugit nisi omnis atque aliquam voluptates. Assumenda sapiente ipsam tempora non! Laboriosam recusandae, id quod laborum, blanditiis ut tempore dolores, nihil hic consequuntur autem?</p>
    <p>Illum vero sit temporibus debitis repellendus totam ratione soluta libero, non ipsa inventore sequi similique hic dignissimos aliquam officiis quas. Provident tempore minima, exercitationem delectus repellat quibusdam tenetur nulla sequi rem, cum accusamus. Officia fugit, deserunt ex ratione voluptatibus ducimus ab odit perferendis, totam repellat quis reprehenderit nam ipsum numquam at, est, optio! Consequuntur maxime harum corporis quas distinctio quidem quia at, repellendus eum minus asperiores laborum, totam animi aliquid ipsa, cumque molestias! Dicta vel sed excepturi, blanditiis iure, cum animi explicabo maxime expedita, culpa minus, et. Impedit provident praesentium vel rem numquam laborum in nam corporis asperiores, a cupiditate, culpa quos ipsam dolores id hic. Perspiciatis pariatur commodi sequi aperiam porro eum amet necessitatibus cumque, iure nesciunt fuga culpa maiores nostrum ipsum doloremque quas eveniet illo, deserunt at sapiente ut recusandae ipsa. Placeat, accusantium non ullam recusandae cumque voluptatum nostrum libero consequatur modi voluptatem consectetur doloremque unde quos, tempore doloribus cum dolorum sunt laboriosam incidunt fuga adipisci quisquam expedita quam labore? Temporibus expedita tempora, qui magnam earum distinctio omnis voluptatibus provident officia repellat doloribus nostrum voluptas dolore, harum aspernatur officiis aliquam ea odit laborum voluptate adipisci itaque praesentium, perferendis dolorum nam! Facilis fuga nam, quasi quos veniam accusamus sequi autem provident, asperiores, natus, doloremque necessitatibus saepe maiores porro itaque unde. Aut voluptates, id vel, eius possimus nobis delectus fuga dicta numquam aliquid, itaque quaerat, quibusdam sint. Sit perferendis omnis minima placeat, dicta ad aliquid assumenda voluptates necessitatibus voluptatum nulla excepturi iusto commodi suscipit, dolorum porro quod provident nesciunt corporis autem explicabo aut quae debitis! Rerum, iste, numquam tempora a, eius aperiam ut odit modi molestiae totam deserunt voluptas. Aspernatur officiis fugit fugiat voluptatibus ratione placeat vel pariatur delectus consectetur reprehenderit vitae magnam maxime autem tenetur rerum non et voluptatem iusto, voluptatum hic. Culpa consectetur tempore animi enim nesciunt repudiandae ex. Quam autem veniam maiores odit praesentium cum aliquid eligendi voluptate libero voluptatibus delectus, animi, placeat sequi aspernatur nostrum harum quibusdam officia rem sunt maxime fugiat nesciunt! Nesciunt, est labore nam veniam sapiente explicabo earum, dolor excepturi recusandae magnam alias quidem. Tempora quisquam voluptatibus laborum voluptate nemo illo, a praesentium necessitatibus iste neque soluta, quis consequuntur earum architecto fugit deserunt nam minus. Veritatis a exercitationem molestias voluptate laudantium, nam iste quasi, odio corporis praesentium explicabo temporibus! At labore qui blanditiis sit nostrum sed eius, suscipit dolor laudantium nam nihil repudiandae, temporibus consequuntur. Itaque magni obcaecati, nulla consequatur, deleniti eum neque architecto rem ipsa odit tenetur provident aliquam placeat maiores similique, veniam ab quisquam reprehenderit dolorem. Iste magni tenetur debitis consequatur ratione maiores, sed alias architecto, dolores quidem. Sapiente commodi enim facilis, unde alias ad error velit nihil non hic inventore quas atque ex accusamus qui facere provident dolorem, blanditiis temporibus eveniet obcaecati aliquid! Minus eos rem iusto doloremque, dolorem laborum, magni, voluptas culpa nostrum a quidem dolores corrupti, hic adipisci accusantium ut unde voluptatum fugit? Iure itaque, architecto ea sint expedita quam tempore possimus aperiam, delectus, tempora excepturi numquam ex, repellendus dolor! Veniam maiores et odit, sunt, magni obcaecati accusantium.</p>
    
  </div>
</div>