文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

带有target="_blank“的链接仍受伪类影响:用户点击后悬停样式，仅限Chrome

基础概念

target="_blank" 是 HTML 中的一个属性，用于指定链接在新窗口或新标签页中打开。伪类（如 :hover）是 CSS 中的一种选择器，用于定义元素在特定状态下的样式。

相关优势

  1. 用户体验：在新窗口或新标签页中打开链接可以避免用户离开当前页面，从而提供更好的用户体验。
  2. 内容组织：有助于更好地组织和展示内容，特别是在复杂的网页布局中。

类型与应用场景

  • 类型：target="_blank" 主要用于 <a> 标签。
  • 应用场景：适用于需要在新窗口或新标签页中打开的外部链接、帮助文档、下载页面等。

问题描述与原因

在 Chrome 浏览器中，带有 target="_blank" 的链接在用户点击后仍然会受到伪类（如 :hover）的影响，这可能导致用户体验上的不一致。

原因分析

Chrome 浏览器在处理 target="_blank" 链接时，会在新标签页打开链接的同时保留原页面上的鼠标悬停状态。这是因为浏览器默认行为是将鼠标事件保留在原页面上，直到新页面完全加载。

解决方案

方法一：使用 JavaScript 阻止默认行为

可以通过 JavaScript 在点击链接时移除伪类样式，从而避免悬停样式的持续显示。

代码语言：txt
复制
<a href="https://example.com" target="_blank" onclick="removeHover(this)">Example</a>

<script>
function removeHover(link) {
    link.style.pointerEvents = 'none';
    setTimeout(() => {
        link.style.pointerEvents = '';
    }, 300); // 延迟恢复鼠标事件，确保新页面已加载
}
</script>

方法二：使用 CSS 解决

通过 CSS 设置链接在新标签页打开时的样式，避免悬停样式的持续显示。

代码语言：txt
复制
a[target="_blank"]:hover {
    pointer-events: none;
}

示例代码

以下是一个完整的示例，展示了如何使用 JavaScript 和 CSS 解决这个问题：

代码语言：txt
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Target Blank Example</title>
    <style>
        a[target="_blank"]:hover {
            pointer-events: none;
        }
    </style>
</head>
<body>
    <a href="https://example.com" target="_blank" onclick="removeHover(this)">Example</a>

    <script>
        function removeHover(link) {
            link.style.pointerEvents = 'none';
            setTimeout(() => {
                link.style.pointerEvents = '';
            }, 300);
        }
    </script>
</body>
</html>

通过上述方法，可以有效解决 Chrome 浏览器中带有 target="_blank" 的链接在点击后仍然受伪类影响的问题。

相关搜索:testing众测天融信防火墙web通俗易懂介绍区块链腾讯云建站云服务器腾讯云服务器与域名腾讯云服务器的缩写腾讯云服务器的使用腾讯云服务器的申请腾讯云服务器的密码腾讯云服务器的搭建
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

Web前端，认识css，css规格，伪类和伪元素的用法，代码详解！

我们在chrome、firfox开发者工具中任意右键点击一个元素会看到一个菜单。接下来我们介绍一下伪类。Are you ready ? 链接伪类 在浏览器中样式的时候它们可以帮助我们快速的进行变换。...首先介绍一下链接伪类，因为任何一个链接始终都会处于下边四个状态之一 link 链接等着用户点击 visited 用户点击过这个链接 hover 鼠标悬停在链接上 active 链接正在被点击 伪类的写法...看到上面的例子，可以看到a标签也就是链接在初始的状态的时候是blue ，当鼠标悬停在上方状态为 red，当鼠标点击链接其中的字体变大并且加粗了（为了效果而已），最后呈现的状态visited 。...比如用户悬停的时候给一个鲜艳的颜色，为了告诉用户快tm点我（毕竟是一个妖艳贱货๑乛乛๑）。...其它伪类、结构伪类 focus 获取焦点，表单中使用 target（不常用） 当用户点击一个指向页面中其它元素（target）的链接时，可以通过此伪类选择 first-child、last-child

1.3K60

全栈之前端 | 11.CSS3基础知识之列表链接学习

cursor 属性 - 设置鼠标指针悬停在元素上的样式 :link 伪类 - 默认链接状态 :visited 伪类 - 已访问链接状态 :hover 伪类 - 鼠标停留选中链接状态 :focus 伪类...- 键盘焦点选中链接状态 :active 伪类 - 点击访问链接状态 ::before 伪元素 - 匹配元素的第一个子元素 ::after 伪元素 - 匹配元素的最后一个子元素 0x01 列表相关样式属性... 执行结果: 0x02 链接相关样式属性 描述: 在网页中基本都会使用标签来规定，鼠标点击后调整的新的域名站点，此章作者为链接添加样式来实现常用的功能...CSS 伪类会在用户访问链接后生效，出于隐私保护的原因，使用该选择器可以修改的样式非常有限（即在跟踪用户点击访问的链接可以使用），搞红蓝对抗的应该有了解。...:focus CSS 伪类表示获得焦点的元素（如表单输）, 即当用户点击或轻触一个元素或使用键盘的 Tab 键选择单表以及链接时，它会被触发。

15510

    • 一篇文章带你了解CSS Pseudo-classes(伪类 )

    CSS伪类允许设置元素的动态状态的样式，例如悬停，活动状态和焦点状态，以及文档树中现有但不能通过使用其他选择器作为目标的元素，而无需添加任何选择器它们的ID或类。 例如，针对第一个或最后一个子元素。...这些伪类使可以对未访问的链接进行样式化，而对访问的链接进行样式化。最常见的样式设置技术是从访问的链接中删除下划线。 例 伪类是动态的，是由于用户与文档进行交互（例如悬停或聚焦等）而应用的。...这些伪类更改了响应用户操作呈现链接的方式。 : hover 当可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色用。 : active 当元素被激活或单击时适用。...在下面的示例中class="red"，带有的链接将显示为红色。 <!

    2K10

    CSS入门指南-1：css工作原理

    为文档添加样式的三种方法： 写在元素标签里（也叫行内样式，只能影响它所在的标签，会覆盖嵌入样式和链接样式） 写在 标签里（也就嵌入样式，应用范围仅限于当前页面，页面样式会覆盖外部样式表中的样式...两个冒号(::)表示新增的伪元素。 UI伪类 UI伪类会基于特定的HTML元素的状态应用样式。 链接伪类 针对链接的伪类有4个： Link。 此时，链接为被点击 Visited。...用户点击过链接之后 Hover。鼠标悬停在链接上 Active。...如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标，可以用:target 选中。...如果两条规则都影响某一元素的属性，特指度也相同，后出现的胜出。

    86320

    这30个CSS选择器，你必须熟记（中）

    浏览器兼容性： IE7+ Firefox Chrome Safari Opera 13、X[href^="http"]：匹配属性值开头的选择器 你是否想过怎么让所有链接旁边加个小图标提示用户是外部链接吗...，要记住的是这些样式对gif和png结尾的图片链接是无效的。...Safari Opera 17、X:checked：选中状态选择器 css单选按钮和复选按钮的默认样式很有限，如果我们想定义个性化的选择后的状态样式，可以使用选中状态选择器，示例代码如下： input...Safari Opera 19 X:hover 鼠标悬停状态选择器 这个选择器，用的频率也比较高，想必大家都清楚，正是的叫法应该是用户操作交互伪类：user action pseudo class，比如想给用户鼠标悬停的元素加上样式...浏览器兼容性： IE6+ （只能用于链接标签） Firefox Chrome Safari Opera 20 X:not(selector) 否定伪类选择器 前面我们学的都是肯定选择器，如果反过来就是否定选择器

    63900

    这30个CSS选择器，你必须熟记（中）

    浏览器兼容性： IE7+ Firefox Chrome Safari Opera 13、X[href^="http"]：匹配属性值开头的选择器 你是否想过怎么让所有链接旁边加个小图标提示用户是外部链接吗...，要记住的是这些样式对gif和png结尾的图片链接是无效的。...Safari Opera 17、X:checked：选中状态选择器 css单选按钮和复选按钮的默认样式很有限，如果我们想定义个性化的选择后的状态样式，可以使用选中状态选择器，示例代码如下： input...Safari Opera 19 X:hover 鼠标悬停状态选择器 这个选择器，用的频率也比较高，想必大家都清楚，正式的叫法应该是用户操作交互伪类：user action pseudo class，比如想给用户鼠标悬停的元素加上样式...浏览器兼容性： IE6+ （只能用于链接标签） Firefox Chrome Safari Opera 20 X:not(selector) 否定伪类选择器 前面我们学的都是肯定选择器，如果反过来就是否定选择器

    65610

    CSS魔法堂：稍稍深入伪类选择器

    前言  过去零零星星地了解和使用:link、::after和content等伪类、伪元素选择器，最近看书时发现这方面有所欠缺，于是决定稍微深入学习一下，以下为伪类部分的整理。...伪类  伪类选择器实质上是让设计师可以根据元素特定的状态，设置不同的视觉效果。...HTMLAnchorElement的4大经典伪类 :link，用于设置链接初始状态时的样式; :visited，用于设置链接被点击过后的样式; :hover，用于设置鼠标悬停在链接上方时，链接的样式;...:active，用于设置鼠标按键按下，但未释放时，链接的样式。  ...想必各位都和我一样，最初接触到的就是上述4个伪类了吧？！而且还死机硬背它们的设置顺序(LVAH)吧，哈哈。 设置当前目标元素样式  还记得URL中的井号吗？

    1.1K20

    CSS中的伪类

    伪类解决的问题 伪类主要解决了以下问题： 状态样式化：允许开发者为元素的不同状态（如悬停、点击、获取焦点等）定义特定样式。...:active :active伪类用于选择被用户激活的元素，通常是指被点击的瞬间。 button:active { background-color: blue; } 3....应用样式：将伪类选择器的样式规则应用到匹配的元素上。 动态更新：当元素状态发生变化（如鼠标悬停、获取焦点等），浏览器重新计算并更新样式。...样式冲突：不同伪类选择器可能会产生样式冲突，影响网页的正常显示。 伪类滥用：滥用伪类选择器可能会导致性能问题和安全风险。 安全最佳实践 限定伪类作用范围：尽量限定伪类选择器的作用范围，避免样式泄漏。...当用户点击导航链接时，目标文章段落会被高亮显示，方便用户阅读。

    14910

    深入解析 CSS 选择器

    动态伪类（多用于超链接的样式） /* 未访问的链接 */ a:link { color: #11698e; } /* 已访问过的链接 注:只要是当前浏览器有访问记录的都算作已访问的状态...*/ a:visited {color: #9fb8ad; } /* 当鼠标悬浮在元素上方时 */ /* 注: 为了使点击过后的链接仍然受设置的伪类样式影响，在CSS 定义时 :hover...需设置在 :link 和 :visited 之后 */ a:hover{ color: #383e56; } /* 被激活的元素 (鼠标点下且为松开时) */ /* 注: 为了使点击过后的链接仍然受设置的伪类样式影响...fileGuid=YyjgWGpdPtQkxxYD) 目标伪类、否定伪类、语言伪类 html { font-size: 14px; } /* 目标伪类 :target:...代表一个唯一的页面元素(目标元素)，其 id 与当前URL片段匹配 */ div:target { color: #f05454; } /* 否定伪类 :not 注: 仅 Chrome

    72250

    CSS选择器分类

    p.par{ font-size:16px; } 通用选择器（*）:选择页面上的所有html元素，设置的样式会影响全部元素...a:hover 鼠标悬停在链接上 a:link 未访问的链接 a:visited 已访问的链接 a:active 已选择的链接 div:hover { }鼠标悬停在div元素上，也可以控制鼠标悬停元素的子元素...伪元素选择器 伪元素用于设置元素指定部分的样式，如元素首行、之前、之后等插入内容。...在元素之前加入内容 p::first-line 文本的首行添加样式或内容 p::first-letter 文本的首字母添加样式或内容 属性选择器 为带有特定属性 [attribute] 的html元素设置样式...a[target]{ background:red } /* 设置背景为红色 */，带有target属性的a标签 a[href="http:baidu.com"]，选带有href="http:baidu.com

    95820

    CSS选择器分类

    p.par{ font-size:16px; } 通用选择器（*）:选择页面上的所有html元素，设置的样式会影响全部元素...a:hover 鼠标悬停在链接上 a:link 未访问的链接 a:visited 已访问的链接 a:active 已选择的链接 div:hover { }鼠标悬停在div元素上，也可以控制鼠标悬停元素的子元素...伪元素选择器 伪元素用于设置元素指定部分的样式，如元素首行、之前、之后等插入内容。...在元素之前加入内容 p::first-line 文本的首行添加样式或内容 p::first-letter 文本的首字母添加样式或内容 属性选择器 为带有特定属性 [attribute] 的html元素设置样式...a[target]{ background:red } /* 设置背景为红色 */，带有target属性的a标签 a[href="http:baidu.com"]，选带有href="http:baidu.com

    1.3K50

    最全HTML与CSS基础总结，不进来看看吗？

    CSS选择器 1.三种样式表总结 2.CSS基础选择器 3.font字体 4.CSS外观属性总结 5.链接伪类选择器 6.复合选择器总结 7.背景总结 四....一个是没有语义，没有强调作用 语义好的网页更受SEO的喜欢，在搜索引擎里面的排名会更靠前 SEO优化 ===> 在输入关键字的时候，搜索引擎会罗列很多很多的网页出来，而用户基本习惯都是点前面的网页，不会去点后面的网页...，所以如果网页在搜索引擎中的排名更加靠前，那么自然而然会带来更多的用户点击访问。...base 可以设置整体链接的打开状态 base 写到 之间 把所有的连接 都默认添加 target="_blank" 7.特殊符号 一些特殊的符号，我们再html 里面很难或者 不方便直接 使用， 我们此时可以使用下面的替代代码...链接伪类选择器 a:link /* 未访问的链接 / a:visited / 已访问的链接 / a:hover / 鼠标移动到链接上 / a:active / 选定的链接 */ 6.复合选择器总结 ①

    1K20

    全栈之前端 | 2.CSS3基础知识之选择器学习

    特定状态下的特定元素（比如鼠标指针悬停于链接之上） a:hover 选择仅在鼠标指针停在链接上时的 元素 关系选择器 将其他选择器组合起来，更复杂的选择元素。...4.属性选择器 描述: 对带有指定属性的 HTML 元素设置样式, 可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性，即属性选择器在为不带有 class 或 id 的表单设置样式时特别有用...World">Hello World target="_blank" />利用属性选择器的样式...常用伪类选择器： 文档部分伪类：:first-child(表示第一个子元素)、:last-child、:only-child、:invalid 用户行为伪类: :hover(鼠标滑动到元素激活)、:focus...:active 在用户激活（例如点击）元素的时候匹配。

    23610

    CSS 伪类和伪元素知识点汇总，不可错过，让你不再困惑

    一、链接相关伪类 a:link 作用：选择未被访问过的链接。 通常用于设置未访问链接的特定样式，如颜色、下划线等。...可以用来区分已访问和未访问的链接，设置不同的样式。例如：a:visited { color: purple; } 将已访问链接的颜色设置为紫色。...a:active 作用：当链接被激活（点击但未释放鼠标按钮）时应用的样式。 用于提供链接被点击时的即时反馈。例如：a:active { color: green; } 链接被激活时变为绿色。...二、通用伪类和伪元素 :hover 作用：当鼠标悬停在任何元素上时应用的样式，并非仅限于 元素。 应用场景广泛，可以为各种元素增加交互效果。...例如，当鼠标悬停在一个 元素上时，可以改变其背景颜色或添加阴影。

    11910

    按钮样式的正确方式

    悬停(hover)，焦点(focus)和活动(active)样式 很酷，你的按钮看起来不错，但是...用户将与它进行交互，并且当按钮的状态改变时，他们需要视觉反馈。...处理focus样式 还有一个棘手的问题。 在多个浏览器中，当您单击链接或按钮时，将应用两个伪类： :active :focus 一旦停止按下鼠标按钮或触控板，“active”伪类就会停止应用。...但在某些浏览器中，focus样式会一直保留，直到用户点击页面上的其他内容为止。 在我的测试中，受影响的浏览器包括Chrome（66），Edge（16）和Firefox（60，仅用于链接）。...我们可以使用新的： :focus-visible伪类（草稿规范）来解决此问题。 这个功能还没有完全指定，但想法是浏览器只能在键盘或类似键盘的交互之后设置： :focus-visible，而不是点击。...focus-visible.js脚本后，它会为元素添加一个js-focus-visible类。

    3.7K20

    CSS选择器及优先级 总结

    important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性 同一级别 (1) 同一级别中后写的会覆盖先写的样式 (2) 同一级别css引入方式不同...相邻兄弟选择器 el + el div+p 选择与同级且紧接在其后的第一个 元素 2、属性选择器 类型 eg 描述 [attribute] [target] 选择带有 target...属性所有元素 [attribute=value] [target=_blank] 选择 target=”_blank” 的所有元素 [attribute~=value] [title~=flower]...属性值以 “def” 结尾的所有元素 [attribute*=”value”] [abc*=”def”] 选择 abc 属性值中包含子串 “def” 的所有元素 3、伪类 类型 eg 描述 :link...a:link 选择所有未被访问的链接 :visited a:visited 选择所有已被访问的链接 :active a:active 选择正在被点击的活动链接 :hover a:hover 选择鼠标指针位于其上的链接

    61020

    每个程序员都会的 35 个 jQuery 小技巧

    $('a[@rel$='external']').click(function(){ this.target = "_blank"; }); }); // how to use...Safari if( $.browser.safari ){ // do something } // Target Chrome if( $.browser.chrome){ //...自动修改破损图像 如果你碰巧在你的网站上发现了破碎的图像链接，你可以用一个不易被替换的图像来代替它们。...鼠标悬停(hover)切换 class 属性 假如当用户鼠标悬停在一个可点击的元素上时，你希望改变其效果，下面这段代码可以在其悬停在元素上时添加 class 属性，当用户鼠标离开时，则自动取消该 class...并把要移除的属性作为参数传入： $('input[type="submit"]').removeAttr('disabled'); 阻止链接加载 有时你不希望链接到某个页面或者重新加载它，你可能希望它来做一些其他事情或者触发一些其他脚本

    4.4K10
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券