草庐IT

鼠标移入，图片放大

小草上飞飞 2023-03-28 原文

效果

之前：

之后

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	<div class="rect">
		<img src="https://images3.alphacoders.com/246/thumbbig-246225.webp" class="img"/>
	</div>
	
<style>
	.rect{
                width:600px;
                height:338px;
		overflow:hidden;
	}
	
	.img{
		transition:1s;
	}
	
	.img:hover{
		transform:scale(1.2);
	}
</style>
</body>
</html>

解释

  1. 外层 div 设置 overflow:hidden; ：意为超出div宽高的部分不显示
  2. 内层 img 设置 .img:hover{transform:scale(1.2);} 当鼠标指上去的时候放大;

备注

  1. transition： 这里面的4种，我测试了，但是没明白啥效果，至少我测试效果不明显，或者我代码有问题，又或者菜鸟的在线html有点问题无法实现

参考

  1. 实现思路，然后自己对着他的代码来了一遍：https://blog.csdn.net/m0_59792745/article/details/127078853
  2. 在菜鸟教程在线编辑器实现：https://www.runoob.com/try/try.php?filename=tryhtml_intro
  3. 文档查询：
鼠标移入httpscodecomHtml/Css

有关鼠标移入，图片放大的更多相关文章

  1. ruby-on-rails - Ruby on Rails - 为文本区域和图片生成列 - 2

    我是Rails的新手，所以请原谅简单的问题。我正在为一家公司创建一个网站。那家公司想在网站上展示它的客户。我想让客户自己管理这个。我正在为“客户”生成一个表格，我想要的三列是:公司名称、公司描述和Logo。对于名称，我使用的是name:string但不确定如何在脚本/生成脚手架终端命令中最好地创建描述列(因为我打算将其设置为文本区域)和图片。我怀疑描述(我想成为一个文本区域)应该仍然是描述:字符串，然后以实际形式进行调整。不确定如何处理图片字段。那么……说来话长:我在脚手架命令中输入什么来生成描述和图片列？ 最佳答案 对于“文本”数

  2. ruby-on-rails - Rails 3，在RAILS_ROOT上方显示来自本地文件系统的jpg图片 - 2

    我正在尝试找出一种方法来显示来自不在RAILS_ROOT下(在RedHat或Ubuntu环境中)的已安装文件系统的图像。我不想使用符号链接(symboliclink)，因为这个应用程序实际上是通过Tomcat部署的，而当我关闭Tomcat时，Tomcat会尝试跟随符号链接(symboliclink)并删除挂载中的所有图像。由于这些文件的数量和大小，将图像放在public/images下也不是一种选择。我查看了send_file，但它只会显示一张图片。我需要在一个格式良好的页面中显示6个请求的图像。由于膨胀，我宁愿不使用Base64编码，但我不知道如何将图像数据与呈现的页面一起传递下去。

  3. 最新版人脸识别小程序 图片识别 生成二维码签到 地图上选点进行位置签到 计算签到距离 课程会议活动打卡日常考勤 上课签到打卡考勤口令签到 - 2

    技术选型1，前端小程序原生MINA框架cssJavaScriptWxml2，管理后台云开发Cms内容管理系统web网页3，数据后台小程序云开发云函数云开发数据库（基于MongoDB）云存储4，人脸识别算法基于百度智能云实现人脸识别一，用户端效果图预览老规矩我们先来看效果图，如果效果图符合你的需求，就继续往下看，如果不符合你的需求，可以跳过。1-1，登录注册页可以看到登录页有注册入口，注册页如下我们的注册，需要管理员审核，审核通过后才可以正常登录使用小程序1-2，个人中心页登录成功以后，我们会进入个人中心页我们在个人中心页可以注册人脸，因为我们做人脸识别签到，需要先注册人脸才可以进行人脸比对，进

  4. ruby-on-rails - 带图片 uploader 的多步表单 - 2

    我想建立3步用户注册，在第2步上传头像。所以我遵循RyanBates的指南http://railscasts.com/episodes/217-multistep-forms.我正在使用CarrierWavegem来处理上传。但似乎我无法在用户session中存储上传的文件信息(我收到无法转储文件错误)。我在Controller中使用以下技术ifparams[:user][:img_path]@uploader=FirmImgUploader.new@uploader.store!(params[:user][:img_path])session[:img]=@uploaderpara

  5. ruby - 在 ruby​​ Selenium 中移动鼠标(move_to) - 2

    我正在尝试使用Ruby中的SeleniumWebDriver2.4模拟鼠标移动如果我运行测试，是否应该看到鼠标在我的屏幕上移动？我很困惑。我试过很多不同的方法示例代码:require'selenium-webdriver'driver=Selenium::WebDriver.for:firefoxdriver.navigate.to'http://www.google.com'element=driver.find_element(:id,'gbqfba')那我试过了driver.action.move_to(element).performdriver.mouse.move_to(e

  6. ruby - 如何在 Ruby 中更新图片文件的 EXIF 标签？ - 2

    标题说明一切。 最佳答案 我正在使用MiniExiftool，它是Perl的Exiftool的ruby​​接口(interface)。https://github.com/janfri/mini_exiftoolhttp://www.sno.phy.queensu.ca/~phil/exiftool/用法:exif=MiniExiftool.new(file_path)exif.date_time_original=Time.nowexif["captionextract"]="Thisismynewcaption"exif.sav

  7. ruby - 如何将鼠标悬停在(鼠标悬停)Selenium Ruby 中的元素上？ - 2

    有人知道如何在SeleniumRubyWebdriver中将鼠标悬停在元素上吗？我的代码是这样的:el=driver.find_element(:css=>"#foo")driver.move_toel#HowdoItriggeramouseovereventonthiselement?我在Linux32位的Firefox中使用selenium-webdrivergem。 最佳答案 我使用了driver.action.move_to(el).perform，它与其他答案略有不同，所以我想为了完整起见我会把它包括在内。

  8. ruby - 为什么 Gosu 隐藏我的鼠标指针？ - 2

    我正在使用Gosugem进行一些图形编程。问题是，当我创建一个窗口时，我的鼠标指针被隐藏了。我可以猜到鼠标在某个时刻的位置，我可以凭直觉点击，但我的用户可能不会。如何显示指针？ 最佳答案 如果你想使用系统光标你可以这样做classWindow查看libgosu的文档RubyGosurdocReference/Window 关于ruby-为什么Gosu隐藏我的鼠标指针？，我们在StackOverflow上找到一个类似的问题： https://stackoverf

  9. css - 如何让我的背景图片只出现在 rails 4 的一页上？ - 2

    我有一张背景图片，我无法只停留在一页上。我制作了一个带有一个主视图的欢迎Controller来显示它。我也在预编译我的Assets。背景显示得很好，但我的目标是只在我的home.html.erbView中显示背景图像。欢迎/home.html.erb:"lang="">title欢迎Controller:classWelcomeController样式表/welcome.css.scss:body{background:{image:asset-url("image.jpg");}}我的应用程序布局中有以下内容:在config/initializers/assets.rb中:Rails

  10. 从零开始编写Web自动化测试脚本(六)--鼠标、键盘操作 - 2

    第一章Selenium+WebDriver环境搭建第二章Selenium定位方式第三章元素常用属性第四章自动化中的三种等待第五章自动化浏览器设置及句柄、窗口切换操作第六章鼠标、键盘操作第七章javascript在自动化中的应用第八章unittest&断言第九章ddt数据驱动第十章测试框架搭建过程Python+Selenium+BeautifulReport文章目录一、鼠标操作二、键盘操作一、鼠标操作1、在web测试中，鼠标的操作包含在ActionChains类中，经常用到的有单击、双击、右击、拖动等操作。2、在使用鼠标操作前需要先导入ActionChains类包：fromselenium.we

随机推荐