当另一个悬停时更改 div 属性

Question

我试图在另一个悬停时缩小一个 div 的宽度。 Hovewer 我不知道应该如何用 css 语法编写它。我尝试使用“+”，但只有一个 div 更小，但我想再缩小 3 个 div。

.portfolio .container-fluid {
  padding: 0px;
  overflow: hidden;
}
.p-section1 h1 {
  color: #fff;
  display: none;
  transition: 1s;
}
.p-section1,
.p-section2,
.p-section3,
.p-section4 {
  opacity: 0.2;
  width: 25%;
  float: left;
  min-height: 600px;
  transition: 1s;
}
.p-section1:hover,
.p-section2:hover,
.p-section3:hover,
.p-section4:hover {
  opacity: 1;
}
.p-section1 {
  background-image: url(img/a.PNG);
}
.p-section1:hover {
  background-image: url(img/a.PNG);
  width: 75%;
  transition: 1s;
}
.p-section1:hover .p-section2,
.p-section3,
.p-section4 {
  width: 8%;
}
.p-section2 {
  background-image: url(img/b.PNG);
}
.p-section2:hover {
  width: 75%;
}
.p-section3 {
  background-image: url(img/a.PNG);
}
.p-section3:hover {
  width: 75%;
}
.p-section4 {
  background-image: url(img/b.PNG);
}
.p-section4:hover {
  width: 75%;
}

<body class="portfolio">
  <div class="container-fluid">
    <div class="p-section1">
      <h1 class="text-center">Tytuł</h1>
    </div>
    <div class="p-section2">
      <h1 class="text-center">Tytuł</h1>
    </div>

    <div class="p-section3">
      <h1 class="text-center">Tytuł</h1>
    </div>

    <div class="p-section4">
      <h1 class="text-center">Tytuł</h1>
    </div>
  </div>

Answer 1

尝试使用 ~ 代替

.p-section {
  float: left;
  width: 140px;
  background: gray;
  margin: 5px;
  overflow: hidden;
  transition: width 0.5s;
}

.p-section:hover ~ .p-section {
  width: 70px;
}

<body class="portfolio">

  <div class="container-fluid">
    
    <div class="p-section nr1">
      <h1 class="text-center">Tytuł</h1>
    </div>
    
    <div class="p-section nr2">
      <h1 class="text-center">Tytuł</h1>
    </div>

    <div class="p-section nr3">
      <h1 class="text-center">Tytuł</h1>
    </div>

    <div class="p-section nr4">
      <h1 class="text-center">Tytuł</h1>
    </div>

  </div>

</body>

这是另一种方法，使用 flex，就像手风琴风格。

.container-fluid {
  display: flex;
}
.p-section {
  width: 25%;
  background: gray;
  margin: 5px;
  overflow: hidden;
  transition: width 0.5s;
}

.p-section:hover {
  width: 50%;
}

<body class="portfolio">

  <div class="container-fluid">
    
    <div class="p-section nr1">
      <h1 class="text-center">Tytuł</h1>
    </div>
    
    <div class="p-section nr2">
      <h1 class="text-center">Tytuł</h1>
    </div>

    <div class="p-section nr3">
      <h1 class="text-center">Tytuł</h1>
    </div>

    <div class="p-section nr4">
      <h1 class="text-center">Tytuł</h1>
    </div>

  </div>

</body>

Answer 2

您可以在将鼠标悬停在父级上时应用更改所有子级的宽度，然后在特定子级上悬停时覆盖较小的宽度。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.portfolio .container-fluid {
  padding: 0px;
  overflow: hidden;
}
h1 {
  font-size: 1rem;
  /*demo only */
}
[class^="p-section"] {
  width: 25%;
  transition: width .5s ease;
  float: left;
  min-height: 100px;
  border: 1px solid grey;
}
.portfolio .container-fluid:hover [class^="p-section"] {
  width: 8%;
}
.portfolio .container-fluid:hover [class^="p-section"]:hover {
  width: 76%;
}

<body class="portfolio">

  <div class="container-fluid">
    <div class="p-section1">
      <h1 class="text-center">Tytuł</h1>
    </div>
    <div class="p-section2">
      <h1 class="text-center">Tytuł</h1>
    </div>

    <div class="p-section3">
      <h1 class="text-center">Tytuł</h1>
    </div>

    <div class="p-section4">
      <h1 class="text-center">Tytuł</h1>
    </div>


  </div>


</body>

当另一个悬停时更改 div 属性

Changing divs properties when another is hover

css

hover