Question

我有一个带有填充的容器，其中包含孩子的元素。

body {
	margin: 50px;
}

* {
	box-sizing: border-box;
}

section {
	width: 100px;
	border: 1px solid;
	padding: 10px;
}

div:hover {
	background: red;
}

<section>
	<div>One</div>
	<div>Two</div>
</section>

当我将鼠标悬停在一个孩子上时，我希望背景适合容器的宽度，怎么办？

请注意，我不想向孩子添加填充。

Answer 1

尝试以下方式，我应用了伪元素：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    body {
        margin: 50px;
    }
    
    * {
        box-sizing: border-box;
    }
    
    section {
        width: 100px;
        border: 1px solid;
        padding: 10px;
    }
    
    div:hover {
        background: red;
        position:relative;
    }
    div::after {
        display:none;
    }
    div:hover::after {
        display:block;
        position:absolute;
        z-index:-1;
        content:"";
        top:0;
        left:-10px;
        right:-10px;
        bottom:0;
        background-color:red;
    }
    </style>
  
</head>
<body>
<section>
    <div>One</div>
    <div>Two</div>
</section>
</body>
</html>

Answer 2

我不明白为什么您不想为孩子添加填充。.因为如果您只是丢失了该部分的填充并将其放在div上，那么一切都将得到解决！

body {
	margin: 50px;
}

* {
	box-sizing: border-box;
}

section {
	width: 100px;
	border: 1px solid;
}

section div {
padding: 10px
}
div:hover {
	background: red;
}

<section>
	<div>One</div>
	<div>Two</div>
</section>

Answer 3

如果您不想使用js，并且无法从该部分中删除填充，则可以使用:before和:after。

section {
  width: 100px;
  border: 1px solid;
  padding: 10px;
  position: relative;
}

div > span {
  position: relative;
  z-index: 2;
}

div:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: red;
  opacity: 0;
}

div:hover:before {
  opacity: 1;
}

<section>
  <div>
    <span>one</span>
  </div>
  <div>
    <span>two</span>
  </div>
</section>

Answer 4

如果仅为顶部和底部定义部分填充，并向div和右侧添加div，则可以实现所需的功能：

body {
	margin: 50px;
}

* {
	box-sizing: border-box;
}

section {
	width: 100px;
	border: 1px solid;
	padding: 10px 0px;
}

section div {
	padding: 0px 10px;
}

div:hover {
	background: red;
}

<section>
	<div>One</div>
	<div>Two</div>
</section>

CSS扩展元素背景以使容器适合填充

4 个答案: