如何实现鼠标放在图片上显示一个播放图标?

author author     2023-04-08     605

关键词:

首先说明的是网站,网站是ASP的。
详细的想法是:类似音悦台的首页那些视频图片,当你的鼠标指针落在某张图片上的时候,就会出现一个播放的图标。如何才可以实现?!
要什么代码?详细的步骤是怎样的?!
谢谢!
看图片,当鼠标滑过这个图片的时候,会出现那个播放图标,如何实现?

1、用脚本(js或jquery)实现:

onmouseover的时候显示播放按钮层(div),onmouseout的时候再隐藏播放按钮层。

 

2、用css实现:

:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。

 

如下是我做的一个小案例(css实现),比较简单,提供一种思路。

 

【源代码见附件,仅供学习参考使用】。

追问

大神,如何将代码添加到网页中?

追答

把div放到网页中,然后引入css即可。

参考技术A

  鼠标滑到网页的某一些元素后,该元素会发生一些样式上的变化,这种效果在css中的实现是通过伪类":hover"来实现的。

  这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。对此最常见的例子是将鼠标指针移到 HTML 文档中一个超链接的边界范围内。理论上,其他元素也可以处于悬停状态,不过 CSS 没有定义究竟是哪些元素。

  如果要实现鼠标"悬停"在图片上后出现播放图标的话,可以给相应的图片元素添加css样式:

img:hover
    background-image:url("播放图标图片的路径");

  这样就能实现鼠标悬停时,更换图片背景的效果。

参考技术B 这个一般是播放器插件实现的
当然,我在想,通过在鼠标移动时,激活上面的层,应该也可以实现,但我没试过,仅仅是个思路
参考技术C 什么意思,听不懂

jq实现鼠标悬浮当前li,显示图标,悬浮另一个li,上一个li图标隐藏,当前li图标显示(代码片段)

核心js代码$("#listli").on(mouseover:function()$(this).children(".task-side").css("left","0");$(this).children(".task-main").css("margin-left","27px");,mouseout:function()$(this).children(".task-side") 查看详情

jq实现鼠标悬浮当前li,显示图标,悬浮另一个li,上一个li图标隐藏,当前li图标显示(代码片段)

核心js代码$("#listli").on(mouseover:function()$(this).children(".task-side").css("left","0");$(this).children(".task-main").css("margin-left","27px");,mouseout:function()$(this).children(".task-side") 查看详情

qq的一些图标是隐藏了按钮的边框但是鼠标放在上面又出现了想问一下如何用wpf实现的

...按钮的边框但是鼠标放在上面又出现了想问一下如何用WPF实现的假设这个图标是按钮BUTTON用样式更改了1图标的样式隐藏了按钮的边框问如在按钮样式的触发器里面实现鼠标移动到按钮上触发透明的边框谢谢或者有更好的方法和... 查看详情

web前端鼠标放在div标签制成的盒子上如何实现图片一秒内由正方形变为圆形在变?

参考技术A1、使用css来控制变化,即给图片添加css样式2、在图片样式绑定:hover事件,控制图片在鼠标悬停时变化//定义动画@-webkit-keyframesimgChange0%border-radius:0%;50%border-radius:50%;100%border-radius:0%;img:hover-webkit-animation-name:imgChange;-webkit-a... 查看详情

如何设计制作javaweb项目的自定义桌面实现,求源码?新手谢谢!

以下是我的效果图,我想的是点击自定义弹窗,用户选择哪些常用的菜单显示在主页的自定义桌面区,一个菜单是以一个小方块显示!就好像购物网站那样显示!参考技术A  win7自定义web桌面方法:在桌面上右键单击。点击“... 查看详情

qt中如何实现按下鼠标左键然后拖动添加的图片!

...左键松开之后图片停留在鼠标放开之后的那个点,只回答如何实现图片的选取也可以!使用QPainter的话不是很好实现,使用QGraphicsItem会非常容易实现。具体楼主还需要看下QGraphicsSceneQGraphicsView这两个类一个是场景一个是视口QGraph... 查看详情

分析一下css怎样实现该动画功能(鼠标放在图片上,图片向左移动)

参考技术A.hc_hotulli:hovermargin-left:-10px;鼠标移上.hc_hotulli对应的元素后,触发hover状态,应用上面这条css,左边距变为-10px,达到向左移动的目的 查看详情

如何显示图标可以用光标悬停

】如何显示图标可以用光标悬停【英文标题】:Howtoshowiconishoverablewithcursor【发布时间】:2021-10-0218:01:27【问题描述】:我有一个字体很棒的图标,带有一个onclick作为按钮。一切正常,但是当我将鼠标悬停在图标上时,我的鼠标... 查看详情

css鼠标放在一个div上,另一个div展示出来(代码片段)

鼠标放在一个div上,另一个div展示出来。<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>鼠标悬停图片上显示文字在线演示www.divcss5.com</title><style>imgborder:0/*css注释说明:设置图片边框为0*/bod 查看详情

在 Windows 窗体 C# 中创建 POI 映射。如何将图标(图像)放在地图上(图片框中的现有图像)?

】在Windows窗体C#中创建POI映射。如何将图标(图像)放在地图上(图片框中的现有图像)?【英文标题】:CreatingaPOImapinWindowsFormsC#.HowcanIputicon(image)overamap(existingimageinpicturebox)?【发布时间】:2016-10-2112:32:14【问题描述】:我正在... 查看详情

sprite(雪碧图)的应用

...一定的距离隔开,就解决了上述的两个问题。我们来看看实现条件:    1.要有装图片的容器宽高    2.引用背景图的文件    3.精准定位改图(background-position的值(默认为(0,0))例如:要... 查看详情

如何仅在鼠标悬停时在树节点的右端显示一个小图标

】如何仅在鼠标悬停时在树节点的右端显示一个小图标【英文标题】:Howtoshowasmallicononrightendofthetreenodeonlyonmouseover【发布时间】:2019-04-0707:59:46【问题描述】:我试图在同一树节点的鼠标悬停时在树节点上显示一个图标。Vue.compo... 查看详情

使用wpf如何实现鼠标放在button上面就显示例如“打开”“关闭”等相应的文字?

参考技术A默认情况下,Application会将实例化的第一个窗口设置为主应用程序窗口(请参见Application.MainWindow)。最后,通过调用Show方法打开窗口;结果如下图所示。通过调用Show打开的窗口是无模式窗口,这意味着应用程序所运行... 查看详情

网页设计图片轮播,将鼠标放在图片上,图片会自动播放,代码怎么改?

参考技术A首先要做的不是把鼠标放上去轮播,而是先让图片能够自动轮播才行下面代码,有详解,你可以参考一下<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>HelloMUI</title> <metaname="viewpor... 查看详情

鼠标放在超链接上,显示div。移开后隐藏div。

...鼠标mousemove事件,在事件函数里,调用 moving方法,就实现div鼠标浮动效果。4、刷新页面,可以看到现在的效果如图。5、把移动的div做得漂亮一点。先把div里的文字去掉。我们不显示文字,显示一张图片。6、然后修改div的样... 查看详情

如何在 XP 样式按钮上显示位图/图标

】如何在XP样式按钮上显示位图/图标【英文标题】:HowcanIdisplayabitmap/icononanXPstylebutton【发布时间】:2010-03-0412:29:21【问题描述】:我想在CButton上绘制一个小(6x9)图形。我已经设法使用::LoadImage和CButton::SetBitmap让它工作。问题是当... 查看详情

html怎么实现当鼠标经过一个图片时显示另一张图片

...片,平时用一种,当鼠标经过时换成另一张,用html怎么实现呢/谢谢了.1、准备切换图片素材,一般是两张,如图,放入img文件夹,跟HTML同级。2、然后用img嵌入到网页,嵌入其中的一张,另外一张待会切换。3、如图,现在是静... 查看详情

js图片滚动怎么让鼠标放在图片上后停止滚动,离开继续?

...会弹回顶部?然后的话我想问下,这两个问题,第一个是鼠标悬停图片上,图片停止滚动,离开继续滚动。第二个是为什么会图片轮播时会让网页返回顶部。谢谢发代码呀让他停止鼠标放上去用鼠标事件清除定时器鼠标移开定时... 查看详情