Question

嘿，我正在尝试制作4x1目标网页。我希望将图片悬停在上面时像这样展开：

https://codepen.io/bradtraversy/pen/dJzzdB

我有一个要扩大，但其他图片将不会跟着。我是编程新手，所以很可能是我正在做的菜鸟错误，但如果您看一下，我将不胜感激。这是我的代码：

HTML：

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Meg</title>
    <link rel="stylesheet" href="masterp2.css">
  </head>
  <body>
    <div class="container">


      <div class="split left">
        <div class="overlay"></div>
        <button type="button" name="btnl">Mer info</button>
        <h1>Grunnleggende info</h1>
      </div>


      <div class="split leftmiddle">
        <div class="overlay"></div>
        <h1>Interesser</h1>
        <button type="button" name="btnlm">Mer info</button>
      </div>
      </div>


      <div class="split rightmiddle">
        <div class="overlay"></div>
        <h1>Familie</h1>
        <button type="button" name="btnm">Mer info</button>
      </div>
    </div>

    <div class="split leftmiddle">
      <div class="overlay"></div>
      <h1>Interesser</h1>
      <button type="button" name="btnlm">Mer info</button>
    </div>
  </div>




  <div class="split right">
    <div class="overlay"></div>
    <h1>Oppsumering</h1>
    <button type="button" name="btnr">Mer info</button>
  </div>




<script type="text/javascript" src="main.js">

</script>
  </body>
</html>

Css：

html, body{
  margin: 0;
  padding: 0;

}

button{
  background: none;
  color: #ffffff;
  width: 150px;
  height: 80px;
  border: 3px solid #000000;
  font-size: 18px;
  border-radius: 4px;
  transition: .6s;
  overflow: hidden;
}

button:hover{
  background: #000000;
  cursor: pointer;
  outline: none;

}

h1{
  font-size: 4rem;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 1;
}




.split.left button{
  top: 50%;
  position: absolute;
  left: 35%;
  transform: translate(12.5%, -50%);
}


.split.right button{
  top: 50%;
  position: absolute;
  right: 35%;
  transform: translate(12.5%, -50%);
}

.split.rightmiddle button{
  top: 50%;
  position: absolute;
  right: 25%;
  transform: translate(-25%, -50%);
}

.split.leftmiddle button{
  top: 50%;
  position: absolute;
  left: 37%;
  transform: translate(-25%, -50%);

}


.split{
  width: 25%;
  height: 100%;
  position: fixed;
  top: 0%;
}

.split.left{
  left: 0px;
  background: url('basic.png') center center no-repeat;
  background-size: cover;
}

.split.left:before{
  background: rgba(98, 98, 98, 0.8);
  position: absolute;
  width: 100%;
  height: 100%;
  content: ""

}

.split.right{
  right: 0px;
  background: url('https://image.ibb.co/m3ZbRb/programmer.png')  center no-repeat;
  background-size: cover;

}

.split.right:before{
  background: rgba(43, 43, 43, 0.8);
  position: absolute;
  width: 100%;
  height: 100%;
  content: ""

}

.split.rightmiddle{
  right: 25%;
  background: url('familiebg.png') center center no-repeat;
  background-size: cover;
}

.split.rightmiddle:before{
  background: rgb(116, 141, 164, 0.8);
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
}

.split.leftmiddle{
  left: 25%;
  background: url('messi.png') center no-repeat;
  background-size: cover;
}


.split.leftmiddle:before{
  background: rgb(95, 87, 88, 0.8);
  position: absolute;
  width: 100%;
  height: 100%;
  content: "";
}






.split.left, .split.right, .split.leftmiddle, .split.rightmiddle, .split.left:before, .split.right:before, .split.leftmiddle:before, .split.rightmiddle:before{
  transition: 1000ms all ease-in-out;
}



.hover-left .left {
  width: 70%;
}

.hover-left .right {
  width: 10%;
  right: 0%;

}

.hover-left .rightmiddle {
  width: 10%;
  right: 10%;
}


.hover-left .leftmiddle {
  width: 10%;
  right: 20%;
}



.hover-left .right:before {
  z-index: 2;
}


.hover-left .rightmiddle:before {
  z-index: 2;
}

.hover-left .leftmiddle:before {
  z-index: 2;
}











.hover-right .right {
  width: 70%;
}

.hover-right .left {
  width: 10;
}


.hover-right .leftmiddle {
  width: 10;
}

.hover-right .rightmiddle {
  width: 10;
}



.hover-right .left:before {
  z-index: 2;}


  .hover-right .leftmiddle:before {
    z-index: 2;
}

.hover-right .rightmiddle:before {
  z-index: 2;
}













.hover-rightmiddle .rightmiddle {
  width: 70%;
}

.hover-rightmiddle .left {
  width: 10%;
}


.hover-rightmiddle .right {
  width: 10%;
}



.hover-rightmiddle .leftmiddle {
  width: 10%;
}

.hover-rightmiddle .right:before {
  z-index: 2;
}


.hover-rightmiddle .left:before {
  z-index: 2;
}



.hover-rightmiddle .leftmiddle:before {
  z-index: 2;
}










.hover-leftmiddle .leftmiddle {
  width: 70%;
}



.hover-leftmiddle .right {
  width: 10%;
}



.hover-leftmiddle .rightmiddle {
  width: 10%;
}



.hover-leftmiddle .rightmiddle:before {
  z-index: 2;
}


.hover-right .right:before {
  z-index: 2;
}

.hover-right .left:before {
  z-index: 2;
}

js：

const left = document.querySelector('.left');
const right = document.querySelector('.right');
const leftmiddle = document.querySelector('.leftmiddle');
const rightmiddle = document.querySelector('.rightmiddle');
const container = document.querySelector('.container');

left.addEventListener('mouseenter', () => {
  container.classList.add('hover-left');
});

left.addEventListener('mouseleave', () => {
  container.classList.remove('hover-left');
});




right.addEventListener('mouseenter', () => {
  container.classList.add('hover-right');
});

right.addEventListener('mouseleave', () => {
  container.classList.remove('hover-right');
});




leftmiddle.addEventListener('mouseenter', () => {
  container.classList.add('hover-leftmiddle');
});

leftmiddle.addEventListener('mouseleave', () => {
  container.classList.remove('hover-leftmiddle');
});





rightmiddle.addEventListener('mouseenter', () => {
  container.classList.add('hover-rightmiddle');
});

rightmiddle.addEventListener('mouseleave', () => {
  container.classList.remove('hover-rightmiddle');
});

谢谢：）

Answer 1

您编辑的复制/粘贴示例中发生了很多事情。也许采用更简单的方法可以帮助您实现所需的目标。我已经编写了一个简单的入门解决方案，它也许可以使您比在Codepen上托管的教程更容易入门。

html, body {
  padding:0;
  margin:0;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
.wrapper {
  display: flex;
}
.slide {
  display: flex;
  flex: 1;
  height: 100vh;
  align-items: center;
  justify-content: center;
  transition: flex 1s;
}
.slide:hover {
  flex: 4
}
.slide:nth-child(1) { background-color: lightcoral }
.slide:nth-child(2) { background-color: lemonchiffon }
.slide:nth-child(3) { background-color: lavender}
.slide:nth-child(4) { background-color: pink}

<div class="wrapper">
  <section class="slide">
    <p>The Doggy</p>
  </section>
  <section class="slide">
    <p>The Kitten</p>
  </section>
  <section class="slide">
    <p>The Mouse</p>
  </section>
  <section class="slide">
    <p>The Doe</p>
  </section>
</div>

悬停在图像上时如何使图像变宽，其他图像变窄？

1 个答案: