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

最新推荐文章于 2022-03-04 10:56:47 发布

卡卡的喵

最新推荐文章于 2022-03-04 10:56:47 发布

阅读量1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/kouwoo/article/details/43563155

jquery 专栏收录该内容

9 篇文章

订阅专栏

本文探讨了HTML、CSS和JavaScript的基本应用，通过实例展示了如何使用jQuery和自定义脚本实现网页元素的显示与隐藏，以及如何利用按钮触发事件来删除特定元素。

<!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  onmouseover="show(this)" onmouseout="hide(this)"  style="float:left">
         <img src="img2.jpg"/>
         
         <div class="btnbox" style="width:170px; height:20px;" >
          <input type="button" value="testbtn1"  onclick="aa(this)"/>
         </div>
         
       </div>
       
       <div  onmouseover="show(this)" onmouseout="hide(this)"   style="float:left">
         <img src="img2.jpg"/>
         
         <div class="btnbox" style="width:170px; height:20px;" >
          <input type="button" value="testbtn2"  onclick="aa(this)"/>
         </div>
         
       <div>
    </div>
</body>
</html>