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

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

＆＃13;

* {
  -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%;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: