鼠标移动到图片出现按钮,点击删除图片

最新推荐文章于 2022-03-04 10:56:47 发布
最新推荐文章于 2022-03-04 10:56:47 发布
阅读量1w 收藏 4
点赞数 1
分类专栏： jquery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kouwoo/article/details/43563155
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">
  .btnbox{
  z-index:999;
  position:relative;
  left:400px;
  top:-350px;
}
</style>

<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  function show(thisObj)
  {
	$(thisObj).children("div").css("display","block");
  }

  function hide(thisObj)
  {
	$(thisObj).children("div").css("display","none");
  }

  function aa(obj){
        $(obj).parent().parent().remove();
  }
</script>

</head>
<body>
    <div id="content">   
       <div  οnmοuseοver="show(this)" οnmοuseοut="hide(this)"  style="float:left">
         <img src="img2.jpg"/>
         
         <div class="btnbox" style="width:170px; height:20px;" >
          <input type="button" value="testbtn1"  οnclick="aa(this)"/>
         </div>
         
       </div>
       
       <div  οnmοuseοver="show(this)" οnmοuseοut="hide(this)"   style="float:left">
         <img src="img2.jpg"/>
         
         <div class="btnbox" style="width:170px; height:20px;" >
          <input type="button" value="testbtn2"  οnclick="aa(this)"/>
         </div>
         
       <div>
    </div>
</body>
</html>



卡卡的喵
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鼠标悬停图片渐渐出现播放按钮
09-18
鼠标悬停图片出现播放按钮，按钮缓缓出现，有一种过度效果，采用css3，适用于视频播放列表图片上，鼠标离开图片慢慢消失
前端html实现鼠标停在图片上出现动画效果
阿拉斯加头头的博客
09-19 6828
前端html鼠标移入图片动作效果 效果展示： 没有用到js和css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <s
vue---鼠标移入图片出现删除按钮（通过hover实现）
maidu_xbd的博客
02-16 1万+
需求描述：当鼠标移入图像时，出现删除按钮，鼠标移出图像时，删除按钮消失。 本案例实现以下功能：（1）点击方框，打开对话框选择照片；（2）删除照片 解决方案：通过css样式实现，设置【删除图标】样式为不可见【.delete-img {display: none;}】，当【li:hover】时设置【删除图标】样式可见【display: none】即可。 本案例通过采用vue编写，...
vue---鼠标移入图片出现删除按钮（通过onmouseover实现）
maidu_xbd的博客
02-19 5763
上篇中(https://blog.csdn.net/maidu_xbd/article/details/104350286)通过hover实现鼠标移入图片出现删除按钮功能，存在问题：当未上传照片时，鼠标移入方框区域，仍显示删除图标。 通过onmouseover，onmouseout优化代码如下： <template> <div class="personal"> ...
实现动态的删除图标显示和隐藏
weixin_52102446的博客
03-04 615
功能实现：鼠标没有移入框框时，只展示商品信息，鼠标移入时，框框右上角出现删除图标，实现删除功能 如图所示：
html鼠标经过，背景颜色替换，图片消失，文字显示
chouao0161的博客
05-09 706
<body> <div id="divId" style="width:100px;height:100px;background-color:red;" onmouseover="divId.style.backgroundColor='black'; ...
利用Jquey.hover来实现 鼠标移入出现删除按钮，鼠标移出删除消失
didingbo4061的博客
02-09 813
利用Jquey.hover来实现 鼠标移入出现删除按钮，鼠标移出删除消失 Html代码 <div class="box"><div class="bmbox" onclick="$('.box:first').remove();>删除&lt...
css设置图片右上删除按钮
大海无量的博客
01-12 6495
参考：https://blog.csdn.net/qq_33464127/article/details/77506461   &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;&lt;/title&gt;       
【css基础】html图片右上角加上删除按钮
热门推荐
qq_33464127的博客
08-23 1万+
DOCTYPE html> html> head>     meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     title>title>     meta charset="utf-8" />     script src="/Scripts/jquery-1.
html+css 实现图片右上角加删除叉、图片删除按钮
12-28
右上角的图片可自己换图片，图片素材我就不放上来了，我就上个代码，挺简单的css和js，初学者应该也看得明白 </pre><pre name=code class=html><!DOCTYPE ...
基于element-ui 使用 upload 预览图片 （含删除功能）
08-23
基于element-ui 使用 upload 预览图片 （含删除功能）参考链接：https://blog.csdn.net/qq_36437172/article/details/100034867
使用jQuery在移动页面上添加按钮和给按钮添加图标
10-23
主要介绍了使用jQuery在移动页面上增加按钮和给按钮添加图标的方法,用到了针对移动开发的jQuery mobile库,需要的朋友可以参考下
关于上传图片以及图片的删除和修改
06-27
用于简单的网页图片添加删除与修改的代码，比较简略，但是功能很详细。
鼠标右键，键盘控制左右移动echarts标记线、标记点
03-05
鼠标右键功能，键盘控制echarts添加标记线、标记点，删除标记线、标记点，左右移动标记点、标记线
springmvc + jquery datatable + ajax实现动态分页查询
通往架构师之路
02-03 9743
网上关于jquery datatable的例子很多,但结合springmvc的例子很少,搞了2天才把这个弄明白,现在记录下来,作为学习笔记。 1.导入所需文件     (1) jquery.dataTables.css     (2) jquery.js     (3) jquery.dataTables.js 2.datatable.jsp listView
jquery PrintArea 实现票据的套打
通往架构师之路
02-26 8087
套打就是指不打印表单上的表结构和固定的文言，只把会变化的数据打印出来，下面的例子就是不把name和name2打印出来，只把aaa和bbb打印出来。 1.代码 name: name2: aaa bbb 打印 $(document).re
在一个div中动态增加一个div或其他标签
通往架构师之路
12-09 6174
var val = '${serveVal}'; // js得到request或session的值 var $test_div = $("#test_div"); //得到html中div的对象 $test_div .append(""+val+""); // 增加一个对象到div
jquery ajax请求返回list数据,并动态生成input标签,并把list数据赋值到input标签
通往架构师之路
11-27 4406
// js function myBtn_f() { var cnt = $('#myCnt').val(); syncAjax('myAjax.html', { 'cnt' : cnt }, function(result) { if (100 == result.statusCode) { var data = result.lst; var $d = $('#myDiv'
matlab GUI中，如何让鼠标移到到控件还没点击，控件就自动打开
最新发布
06-07
在MATLAB GUI中，可以使用控件的鼠标移动事件（"WindowButtonMotionFcn"）来实现这个功能。具体步骤如下： 1. 打开MATLAB GUIDE，选择需要添加该功能的控件，例如一个按钮（pushbutton）。 2. 在"Property Inspector"中选择该按钮，找到"Callback"属性，删除其中的默认代码，将其改为以下代码： set(hObject,'WindowButtonMotionFcn',@buttonHover); 其中，"hObject"是该按钮的句柄，"buttonHover"是一个自定义的函数名称，用于实现鼠标移动事件。 3. 在MATLAB编辑器中打开.m文件，添加以下代码： function buttonHover(hObject,eventdata) % hObject: handle to object that is being moved. % eventdata: reserved - to be defined in a future version of MATLAB. if strcmp(get(hObject,'type'),'uicontrol') if strcmp(get(hObject,'Style'),'pushbutton') set(hObject,'Value',1); % 在这里添加按钮打开的代码 end end 其中，"hObject"是控件的句柄，"get(hObject,'type')"用于获取控件类型，"get(hObject,'Style')"用于获取控件样式。如果控件为按钮（pushbutton），则将其"Value"属性设置为1，表示按钮已经被点击。接着，可以在此处添加按钮打开的代码。 4. 保存.m文件并运行GUI，当鼠标移动到按钮上时，按钮会自动被点击，并执行相应的操作。 需要注意的是，如果控件已经被点击，再将鼠标移动到它上面，该函数也会被触发。因此，需要在自定义函数中添加判断条件，避免重复执行相同的操作。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值