css - 我不明白为什么这个背景不画
问题描述
我有两个问题。第一件事是,当我将鼠标悬停在一个东西上时(https://prnt.sc/s9etq3(由于屏幕截图,鼠标不可见,但它在对象上))我只得到一个轮廓而不是完整的背景。第二件事是我太笨了,无法正确缩放搜索框。我希望它距离两侧(左右)有 10% 的距离。悬停的代码在里面div.gallery:hover
@import url('https://fonts.googleapis.com/css?family=Roboto');
*{
margin: 0;
background: #222;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.search_box{
position: relative;
left: 0%;
}
.search_box input[type="text"]{
width: 100%;
padding: 20px;
padding-right: 60px;
box-sizing: border-box;
background: rgba(0,0,0,0.3);
border: 2px solid #fff;
border-radius: 10px;
font-size: 18px;
color: #fff;
outline: none;
}
.fa-search{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 25px;
color: #fff;
font-size: 25px;
}
::-webkit-input-placeholder {
color: #fff;
}
::-moz-placeholder {
color: #fff;
}
:-ms-input-placeholder {
color: #fff;
}
@media screen and (max-width: 425px){
.search_box{
width: 95%;
}
}
div.gallery {
margin: 5px;
border: 1px solid #222;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #404040;
background: #404040;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.container
{
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.container div
{
margin: 10px;
}
.container div label
{
cursor: pointer;
}
.container div label input[type="checkbox"]
{
display: none;
}
.container div label span
{
position: relative;
display: inline-block;
background: #424242;
padding: 15px 30px;
color: #555;
text-shadow: 0 1px 4px rgba(0,0,0,.5);
border-radius: 20px;
font-size: 20px;
transition: 0.5s;
user-select: none;
overflow: hidden;
}
.container div label span:before
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
}
.container div label input[type="checkbox"]:checked ~ span
{
width: 100%;
padding: 20px;
padding-right: 60px;
box-sizing: border-box;
background: rgba(0,0,0,0.3);
border: 2px solid #fff;
border-radius: 10px;
font-size: 18px;
color: #fff;
outline: none;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Search</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="wrapper">
<div class="search_box">
<input type="text" name="box" id="search_text" placeholder="Search by Customer Details" class="form-control" />
</div>
</div>
</head>
<body>
<div id="result"></div>
<div style="clear:both"></div>
</body>
</html>
<script>
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"fetch.php",
method:"post",
data:{query:query},
success:function(data)
{
$('#result').html(data);
}
});
}
$('#search_text').keyup(function(){
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
</script>
´´´
解决方案
推荐阅读
- python - 使用 python 抓取推文
- java - 有没有办法创建一个界面来显示来自 Java 中的 FTP 服务器的档案?
- rabbitmq - Spring AMQP:检查 RabbitMQ 配置
- java - 如何将 Headers entrySet.forEach 转换为字符串数组?
- html - Css 为什么我的标签不在我的“div”中间。valign=middle 不起作用
- java - 这段代码不是线程安全的——它需要吗?
- python-3.x - 如何绘制由不同列分组的 Pandas DataFrame 中列中的值的图表
- java - 如何正确地将一个瞬态中的多个实体保存到数据库中?
- docker - 码头工人组成
不启动 适当地 - forms - 自定义电子邮件脚本