Question

很抱歉，如果我复制了，但我确实陷入了困境，我尝试了所有可能的解决方案，我已经在这里阅读并在谷歌上搜索，让我失望。

我希望在div徘徊时实现这一点，所有背景都在消失。在所有背景下 - 我的意思是在悬停的div旁边的所有内容都应该出现在顶部。当div徘徊时，所有背景都应该恢复清晰。

也许这是实现这一目标的简单方法，但请相信我 - 到目前为止我没有任何作品。所以请 - 帮助我:)

<body>
<div class="block1">
<div id="text">
  one
</div>
</div>
<div class="block">
    <div id="text">
        two
    </div>
</div>
</body>

附加JSFiddle： https://jsfiddle.net/ryfgwswo/1/

Answer 1

你想要这样吗？

body,html {
  margin: 0;
  padding: 0;
  width:100%;
  height:100%;
}

#text {
	text-align: center;
	padding: 20px;
	color: #cfcaca;
}

.block1 {
	width: 200px;
	height: 200px;
	background: black;
	border: 2px solid #cfcaca;
	margin: 100px 100px;
	-moz-box-shadow: 0 0 1px #4e4848;
	box-shadow: 0 0 1px #4e4848;
	position: absolute;
	display: block;
	transition: 2s all ease-in-out;
}

.block1:hover {
	width: 500px;
	height: 500px;
	margin: 0 auto;
	background:rgba(0,0,0,0.4);
	border: 2px solid #cfcaca;
	-moz-box-shadow: 0 0 1px #4e4848;
	box-shadow: 0 0 1px #4e4848;
	display: block;
	z-index: 100;
}

.block {
	width: 200px;
	height: 200px;
	background: #000;
	border: 2px solid #cfcaca;
	margin: 100px 300px;
	-moz-box-shadow: 0 0 1px #4e4848;
	box-shadow: 0 0 1px #4e4848;
	transition: 2s all ease-in-out;
	position: absolute;
	display: block;
}

.block:hover {
	width: 300px;
	height: 300x;
	margin: 100 auto;
	background: rgba(0,0,0,0.4);
	border: 2px solid #cfcaca;
	-moz-box-shadow: 0 0 1px #4e4848;
	box-shadow: 0 0 1px #4e4848;
	display: block;
	z-index: 101;
}

<body>
  <div class="block1">
    <div id="text">
      one
    </div>
  </div>
  <div class="block">
		<div id="text">
			two
		</div>

</div>
</body>

Answer 2

要在另一个div上应用悬停效果，第二个div需要在HTML中排在第二位。

我只是创建了一个位于体内的div，但在＆＃34; block1＆＃34;和＆＃34;阻止＆＃34;，并为其应用背景颜色以及不透明度过渡。

.background {
  height: 100%;
  width: 100%;
  opacity: 1;
  background-color: rgb(255,0,255);
}

.block:hover + .background {
  opacity: 0;
  transition: 2s all ease-in-out;
}
.block1:hover ~ .background {
  opacity: 0;
  transition: 2s all ease-in-out;
}

和HTML：

<body>
  <div class="block1">
    <div id="text">
      one
    </div>
  </div>
  <div class="block">
        <div id="text">
            two
        </div>
</div>
<div class="background">
</div>
</body>

这里是代码： https://jsfiddle.net/ryfgwswo/4/

在悬停

2 个答案: