search
HomeWeb Front-endHTML TutorialCSS秘密花园:扩展可点击区域_html/css_WEB-ITnose

《 CSS Secrets 》是 @Lea Verou 最新著作,这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书,经过一段时间的阅读,我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感,与大家一起分享。

如果你对用户体验感兴趣的话,你可能听说过费茨法则。最早在1954年由美国物理学家Paul Fitts提出,费茨法则是迅速移动到目标区域所需要的时间,是到目标的距离和目标的宽度之间的比率的对数函数。其常用的数学公式是Time = a + b log2 ( D / S + 1 )。其中, T 是所用的时间, D 是到目标中心的距离, W 是目标的宽度, a 和 b 是常数。

提示:查看费茨法则的应用,通过 simonwallner.at/ext/fitts 的交互可视化

尽管在当时,图形用户界面是不存在的,费茨法则完全适用于定点设备,但现在已成为广为人知的HCI(人机交互)原则。这在一开始听起来可能会比较惊讶,但是记得费茨法则更多的是人类电机控制,而不是特定的硬件。

一个显而易见的推论是,目标越大,越容易到达。因此,它通常会增加可用性来扩展小控件周围的可点击区域,否则可能会很难点击到,如果不能选择将其放大的话。随着触摸屏的逐渐普及,这变得越来越重要。没有人会想要按了几十次才点到那个令人讨厌的小按钮,尽管这还是普遍存在。

其他时候,我们希望当我们鼠标悬停在窗口的一侧时,就会有某个元素划入——例如,一个自动隐藏的标题,在鼠标靠近的时候自动从顶部划入,这也涉及到了要扩展它的点击区域(只针对一个方向)。我们可以通过CSS来完成它吗?

解决方案

我们先假设我们有如图所示的简单的一个按钮

然后我们希望它的点击面积增加 10px ,四个方向都是。我们已经为它应用了一些简单的样式,包括 cursor: pointer ,这不仅可以为鼠标交互提供一些方便,还可以帮我们测试点击区域在哪。

扩展点击区域的最简单的方法是一个透明的实线边框,因为鼠标和边框的交互也会作用在元素之上,不像outline和shadow。例如,把一个元素的点击区域在所有方向上扩展 10px ,代码可以简单地这样写:

border: 10px solid transparent;

但是,正如你在下图中看到的,效果不是很好,因为这让我们的按钮变大了!

原因是背景默认扩展了其下方的边框。 background-clip 可以帮助裁剪背景,如下:

border: 10px solid transparent;background-clip: padding-box;

如上图所示,显示没有问题。但是等你在按钮周围做一个实际的边框,你才会发现实际上你已经用了唯一的那个边框来扩展点击区域了。那怎么办呢?很简单,你可以利用内阴影模拟一个(纯色的)边框

border: 10px solid transparent;box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset;background-clip: padding-box;

效果如下图所示:

不像边框,你可以使用不止一个 box-shadow ,如果你需要更多,你可以使用逗号来分隔这一组阴影。但是,如果我们把内阴影和外阴影结合起来,我们会得到一个非常奇怪的效果,因为外阴影是在边框盒之外绘制的。例如,我们可能会想给按钮添加一个模糊阴影,给它一个在页面上“pop out”的效果,也就是另一种可点击的内容:

box-shadow: 0 0 0 1px rgba(0,0,0,.3) inset,            0 .1em .2em -.05em rgba(0,0,0,.5);

但是,如果我们试过了,我们看到的结果和我们期望的有很大不同。

这种解决方案因为其它原因,所以并不完美。边框会影响布局,这在某些情况下可能不是问题。所以我们该咋办呢?我们移除边框,然后利用伪元素来捕捉它们的父元素和鼠标的交互。

我们可以覆盖一个透明的伪元素在我们的按钮上边,而且它在各个方向都比我们的按钮大 10px :

button {    position: relative;    /* [rest of styling] */}button::before {    content: '';    position: absolute;    top: -10px; right: -10px;    bottom: -10px; left: -10px;}

这也是可行的,而且只要我们不需要伪元素了,它也不会影响到任何东西。伪元素的解决方案是非常灵活的——我们可以让点击区域变成任何大小、位置,或者我们想要的形状,甚至和元素本身完全无关的内容!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
What are boolean attributes in HTML? Give some examples.What are boolean attributes in HTML? Give some examples.Apr 25, 2025 am 12:01 AM

Boolean attributes are special attributes in HTML that are activated without a value. 1. The Boolean attribute controls the behavior of the element by whether it exists or not, such as disabled disable the input box. 2.Their working principle is to change element behavior according to the existence of attributes when the browser parses. 3. The basic usage is to directly add attributes, and the advanced usage can be dynamically controlled through JavaScript. 4. Common mistakes are mistakenly thinking that values ​​need to be set, and the correct writing method should be concise. 5. The best practice is to keep the code concise and use Boolean properties reasonably to optimize web page performance and user experience.

How can you validate your HTML code?How can you validate your HTML code?Apr 24, 2025 am 12:04 AM

HTML code can be cleaner with online validators, integrated tools and automated processes. 1) Use W3CMarkupValidationService to verify HTML code online. 2) Install and configure HTMLHint extension in VisualStudioCode for real-time verification. 3) Use HTMLTidy to automatically verify and clean HTML files in the construction process.

HTML vs. CSS and JavaScript: Comparing Web TechnologiesHTML vs. CSS and JavaScript: Comparing Web TechnologiesApr 23, 2025 am 12:05 AM

HTML, CSS and JavaScript are the core technologies for building modern web pages: 1. HTML defines the web page structure, 2. CSS is responsible for the appearance of the web page, 3. JavaScript provides web page dynamics and interactivity, and they work together to create a website with a good user experience.

HTML as a Markup Language: Its Function and PurposeHTML as a Markup Language: Its Function and PurposeApr 22, 2025 am 12:02 AM

The function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.

The Future of HTML, CSS, and JavaScript: Web Development TrendsThe Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AM

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

HTML: The Structure, CSS: The Style, JavaScript: The BehaviorHTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The Future of HTML: Evolution and Trends in Web DesignThe Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

HTML vs. CSS vs. JavaScript: A Comparative OverviewHTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version