纯css实现触发选择器

最新推荐文章于 2024-04-13 00:15:00 发布
最新推荐文章于 2024-04-13 00:15:00 发布
阅读量693 收藏
点赞数
分类专栏： css

原理：hover触发CSS临近选择器

所需工具：DW（用来给图片画热区），PS（算出弹出层的top和left偏移值）

Demo里画热区，你用鼠标悬停到上面即可看到效果


<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  charset = "UTF-8" >
     < title >图片热区hover效果</ title >
     < style >
     .main-wrap {position: relative; width: 884px; height: 600px; margin: 0 auto;} /* 宽度与高度必须与背景大图一致 */
     .bigImg {position: absolute; display: none; border: 1px solid #ccc;}
         .img1 {top: 199px; left: 153px;}
         .img2 {top: 369px; left: 552px;}
         .img3 {top: 411px; left: 632px;}
     .hotspot:hover + .bigImg {display: block;}
     </ style >
</ head >
< body >
     < div  class = "main-wrap" >
         < img  src = "bg.jpg"  usemap = "#Map" >
         < map  name = "Map" >
 
           < area  class = "hotspot"  shape = "rect"  coords = "152,117,232,190"  href = "#" >
           < img  class = "bigImg img1"  src = "cpu.png" >
 
           < area  class = "hotspot"  shape = "rect"  coords = "553,313,605,355"  href = "#" >
           < img  class = "bigImg img2"  src = "drive.png" >
 
           < area  class = "hotspot"  shape = "rect"  coords = "635,353,695,397"  href = "#" >
           < img  class = "bigImg img3"  src = "printer.png" >
 
         </ map >       
     </ div >
</ body >
</ html >

qq_35741426
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
css-triggers, 一个引用CSS属性的呈现影响的参考.zip
10-10
css-triggers, 一个引用CSS属性的呈现影响的参考 CSS触发器告诉你通过改变给定的CSS属性会触发什么。在本地运行应用程序克隆项目。以英镑为单位运行 npm install 触发器。以英镑的css触发运行 gulp，以生成一个生成。运行 node server.js转到
css 触发事件,调用.css（）后触发事件（保存当前样式）？
weixin_29172201的博客
08-04 408
但考虑这件事，在我看来，后一个更简洁的方法是让用户定义的onSuccess回调为好，而不是使用。 css，让用户定义的两个类的成功和错误的情况下，并将它们设置在元件上。例子：(function($) {$.fn.attach = function(options, isError) {var opt = $.extend({onError : function(message) { // Defa...
触发 hover 效果时，设置文字底部横杠显示
道阻且长 心态要好
04-13 363
css实现底部横杠效果
HTML5+CSS3实现的华丽的日期选择器源码
09-02
这款日历应用的特点是拥有非常酷的日期选择效果，鼠标滑过日期时即会有立体的背景展现出来。建议使用支持HTML5及CSS3的火狐或谷歌等浏览器预览。
Trigger CSS Transition On Appended Element
zhuchuji的博客
03-02 298
Problem If adding css transition on a just-appended element, the transition will not work as expected. Take the below code as example. // css .fade-in { opacity: 0; } .fade-in.show { opacity: 1; tr...
CSS打造经典鼠标触发显示选项
管子（zero）的杂乱空间
11-20 1185
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="
纯CSS实现点击动画
小多的博客
08-30 5971
暂不推荐该方法，a标签会跳转页面，且不能直接第二次点击取消样式，需要设置href和id。：点击label内部文本可以触发该控件，实现点击选择框或文字都可以出现动画效果。＃ 锚的名称是在一个文件中链接到某个元素的URL。元素被链接到目标元素。选择器可用于当前活动的target元素的样式。属性实现选中未选择变化。...
纯css实现边框动画特效 css
只会写bug的靓仔的博客
12-13 3059
下面是完整代码，实现图示效果，效果为出现四个白框，和去除黑色背景。 <!-- 了解更多模块 --> <!DOCTYPE html> <html> <head> <style type="text/css"> body{ background-color: #D0D0D0; } .knowmorbutton { width: 100px; height: 40px; position: relative; backgr
巧用CSS属性值正则匹配选择器(小技巧)
11-21
利用这些选择器，纯CSS就可以做出很炫酷的功能。 <!– more –> 显示超链接的小图标和文件类型图表 利用[attr^="val"]前匹配选择器可以判断元素的链接地址类型，以用来显示对应的小图标。显示超链接的小图标的...
js实现点击文本框显示日期选择器特效代码分享
01-19
为大家分享的JavaScript图片轮播代码...js点击文本框显示日期选择器</title> <link type=text/css rel=stylesheet href=calendar.css > [removed][removed] <script type=text/javascript src=calendar-
【CSS基础学习】伪类选择器，伪元素选择器，交集选择器
01-08
伪类选择器 伪类选择器和伪元素选择器可以为文档中非具体存在的结果指定样式，或者为某些元素（包括文档本身）的状态指定样式，它会根据某种条件而非文档结构应用样式。 伪类选择器的使用方法如下： HTML标记 伪类名...
jQuery颜色选择器ColorPicker
04-26
ColorPicker基于强大的jQuery，使用方便、配置简单，同时不需要加载额外的CSS文件。可以随心所欲的使用到项目中，兼容各大浏览器。
analytics-css：CSS选择器复杂性和性能分析器
02-04
分析css CSS选择器的复杂性和性能分析器。 analytics-css是作为绑定到CSS解析器触发的事件的一组规则构建的。 每个规则都可以生成指标并添加带有更多详细信息的“违规者”（有关示例，请参见“用法”部分）。安装...
【CSS】基础 各种选择器
weixin_62321221的博客
05-15 2565
一.CSS使用方法 1.内联样式 内联样式也叫作行内样式,就是在html标签中,开始标签中写入style属性,来完成样式渲染. 优势:单独渲染该标签,优先级非常高 劣势:不利于修改,复用性很差 2.内部样式 在html文件中的<head></head>标签中加入<style></style>标签,在<style>标签中写CSS样式. 书写时需要用到选择器和{},复用性高于内联样式,插入到当前html中,别的页面不能使用 3.外部.
样式（Style）和触发器
weixin_44570949的博客
08-06 409
样式（Style）和触发器 样式（Style）是组织和重用格式化选项的重要工具。样式封装了一系列属性设置细节；触发器，顾名思义, 触发器可以理解为, 当达到了触发的条件, 那么就执行预期内的响应, 可以是样式、数据变化、动画等。触发器，从某种意义上来说它也是一种Style，因为它包含有一个Setter集合，并根据一个或多个条件执行Setter中的属性改变。 一、样式（Style） WPF中的各类控件元素, 都可以自由的设置其样式，而样式则是组织和重用格式化选项的重要工具。不是使用重复的...
触发器 （新增修改）
SsStr的博客
10-30 1048
CREATE TRIGGER trigger_addAddPwd on sys_user for INSERT AS declare @user_id varchar(50) BEGIN select @user_id=user_id from inserted update sys_user set user_app_pwd=123 where user_id = @user_id...
grpcio-1.63.0-cp38-cp38-linux_armv7l.whl
最新发布
05-28
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
SQLyog-13.1.3-0.x86Community.exe
05-28
SQLyog-13.1.3-0.x86Community
VB自动出题题库系统设计(源代码+系统).rar
05-28
计算机专业毕业设计VB精品论文资源
css中伪类选择器怎么写
07-23
在CSS中，伪类选择器使用冒号（:）来表示。以下是一些常见的伪类选择器的写法示例： 1. :hover：当鼠标悬停在元素上时触发。...你可以根据具体需求选择适合的伪类选择器来实现你想要的效果。 希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值