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

2024-12-02 11:55:02
推荐回答(4个)
回答1:

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

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

 

2、用css实现:

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

 

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

 

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

回答2:

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

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

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

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

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

回答3:

这个一般是播放器插件实现的
当然,我在想,通过在鼠标移动时,激活上面的层,应该也可以实现,但我没试过,仅仅是个思路

回答4:

什么意思,听不懂