Question

＆＃13;

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
}

.body {
  height: 100vh;
  text-align: center;
}

.square {
  width: 100vm;
  height: 100vm;
  /* For IE9 */
  width: 100vmin;
  height: 100vmin;
  display: inline-block;
  vertical-align: middle;
  margin-top: calc((100vh - 100vmin) / 2);
  background-image: url('https://ae01.alicdn.com/kf/HTB12ZJjMXXXXXa_aXXXq6xXFXXXE/3-Piece-Wall-font-b-Picture-b-font-Dreamy-font-b-Purple-b-font-font-b.jpg');
  font-size: 0;
}

.square:before {
  content: "";
  height: 100%;
}

.square:before,
.content {
  display: inline-block;
  vertical-align: middle;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Firefox < 16 */

@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Internet Explorer */

@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* Opera < 12.1 */

@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.content {
  -webkit-animation: fadein 1s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 1s;
  /* Firefox < 16 */
  -ms-animation: fadein 1s;
  /* Internet Explorer */
  -o-animation: fadein 1s;
  /* Opera < 12.1 */
  animation: fadein 1s;
}

#left-content {
  background-size: cover;
  width: 50vmin;
  height: 100vmin;
  float: left;
}

#right-content {
  background-size: cover;
  width: 50vmin;
  height: 100vmin;
  float: right;
}

#left-content:after {
  background-size: cover;
  width: 50vmin;
  height: 100vmin;
  float: left;
  opacity: 0;
  content: ' ';
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#right-content:after {
  background-size: cover;
  width: 50vmin;
  height: 100vmin;
  float: right;
  opacity: 0;
  content: ' ';
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#left-content:hover:after+.square {
  background-image: url('https://ae01.alicdn.com/kf/HTB1EuKlLVXXXXcmXpXXq6xXFXXXd/E-HOME-Stretched-LED-Canvas-Print-Blue-Rose-Flash-Effect-LED-Flashing-font-b-Optical-b.jpg');
  opacity: 1;
}

#right-content:hover:after {
  background-image: url('https://ae01.alicdn.com/kf/HTB12hyVPVXXXXbEaXXXq6xXFXXX8/-font-b-Canvas-b-font-Painting-Printed-Pictures-Paints-Wall-Hanging-font-b-Canvas-b.jpg');
  opacity: 1;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="body">
    <div class="square">
      <div class="content">
        <a href="">
          <div id="left-content"></div>
        </a>
        <a href="">
          <div id="right-content"></div>
        </a>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

我想做以下事情。

DIV容器包含两个DIV（1和2）。当鼠标超过DIV 1时，DIV CONTAINER的背景图像变为image1。当鼠标悬停在DIV 2上时，DIV CONTAINER的背景图像将变为image2。

我想用CSS来试试。

Answer 1

因此实际上可以使用伪元素。看看我的例子。

＆＃13;

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

#main:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

#main {
  height: 170px;
  border: 1px solid black;
  box-sizing: border-box;
  position: relative;
}

#div1 .show {
  border-right: 1px solid black;
}

#div1:hover:before, #div2:hover:before {
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
  left: 0;
  top: 0;
  z-index: 1;
  pointer-events: none;
}

#div1:hover:before {
  background: yellow;
}

#div2:hover:before {
  background: green;
}

#div1, #div2 {
  width: 50%;
  display: block;
  float: left;
  text-align: center;
  vertical-align: center;
  box-sizing: border-box;
  pointer-events: auto;
}

.show {
  position: relative;
  z-index: 2;
  height: 168px;
}

＆＃13;

<div id="main">
  <div id="div1">
    <div class="show">
      div1
    </div>
  </div>
  <div id="div2">
    <div class="show">
      div2
    </div>
  </div>
</div>

＆＃13;

Answer 2

body { width: 100%; margin: 0; padding: 0; }
.container {
  position: relative;
  display: flex;
  width: 100vw;
  height: 100vh;
}
.div1, .div2 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 50%;
  height: 100%;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 0 0 10px black;
  color: hsla(0, 57.6%, 50%, 0.5);
  background-color: hsla(0, 0%, 0%, 0.1);
}
.background1, .background2 {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: none;
  z-index: -1;
}
.background1 {
  background: url("http://i.imgur.com/zFYHM67.jpg");
  background-repeat:no-repeat;
  background-size: cover;
}
.background2 {
  background: url("http://i.imgur.com/nYKEFNF.jpg");
  background-repeat:no-repeat;
  background-size: cover;
}
.div1:hover ~ .background1 {
  display: flex;
}
.div2:hover ~ .background2 {
  display: flex;
}

<div class="container">
  <div class="div1">Div 1</div>
  <div class="background1"></div>
  <div class="div2">Div 2</div>
  <div class="background2"></div>
</div>

<强>拨弄

https://jsfiddle.net/Hastig/k652snyc/

仅限CSS：具有共同背景的两个div在鼠标上改变其中一个

2 个答案: