一个包含css、html和javascript的框中的按钮

Button inside a box with css,html and javascript

本文关键字：javascript 按钮 html 一个 css 包含      更新时间：2023-09-26

嘿，伙计们，我做了一个包含内盒的outerbox。代码是

<html>
<link rel="stylesheet" type="text/css" href="styles.css">
<body>
<div id="boxed">
<div id="anotherbox"> </div>
</div>
</body>
</html>

css文件

#boxed {
  width: 150px;
padding: 50px;
border: 5px solid gray;
margin: 0;
background-image: url('http://placehold.it/200x200');
}
#boxed:hover > #anotherbox {

 width: 50px;
padding: 40px;
border: 5px solid gray;
margin: 0;

visibility: visible;
}

这很好用。。

但我需要的是，我想在内部框中显示一个简单的按钮。我试过一些javascript代码，但效果很好。

希望你们能帮助我。。P： S。。我不需要jquery解决方案。。感谢

这就是您想要的吗？

#boxed {
  width: 150px;
  padding: 50px;
  border: 5px solid gray;
  margin: 0;
  background-image: url('http://placehold.it/200x200');
}
#boxed:hover > #anotherbox {
  width: 50px;
  padding: 40px;
  border: 5px solid gray;
  margin: 0;
  visibility: visible;
}
<div id="boxed">
  <div id="anotherbox">
    <input type="button" value="inside" />  
  </div>
</div>

您可以使用按钮实现这一点，如下所示：

HTML：

#boxed {
    width: 150px;
    padding: 50px;
    border: 5px solid gray;
    margin: 0;
    background-image: url('http://placehold.it/200x200');
}
#boxed:hover > #anotherbox {
    width: 50px;
    padding: 40px;
    border: 5px solid gray;
    margin: 0;
    visibility: visible;
}
#boxed:hover #anotherbox > button {
    width: 16px;
    padding: 30px;
    border: 5px solid gray;
    margin: 0;
    visibility: visible;
    cursor:pointer;
}
<div id="boxed">
    <div id="anotherbox">
        <button>Button</button>
    </div>
</div>

相关文章：