Dari contoh ini, saya mencoba meredupkan ( yaitu mengurangi opacity) elemen non-hover dari halaman html.

Kode di bawah ini hanya berfungsi untuk elemen yang tidak tumpang tindih. Namun, jika halaman berisi elemen yang tumpang tindih di latar belakang, dan saya tidak ingin ada efek apa pun saat mengarahkan kursor (misalnya kotak hijau di bawah), elemen menarik yang "dapat dilayangkan" (misalnya lingkaran merah dan persegi panjang biru di bawah) adalah meredup saat tidak melayang, tetapi saat kursor masih berada di latar belakang.

Dengan kata lain:

. kotak hijau: tidak "dapat dilayangkan" (seharusnya tidak berpengaruh saat melayang)

. lingkaran merah: "hoverable" (yaitu meredupkan semua elemen lain saat melayang, yaitu persegi panjang biru dan persegi hijau)

. persegi panjang biru: "hoverable" (yaitu meredupkan semua elemen lain saat mengarahkan kursor, yaitu lingkaran merah dan kotak hijau)

Bagaimana saya bisa melewatkan peredupan semua elemen saat mengarahkan kotak hijau?

.parent:hover .child {
  opacity: 0.2;
  transition: all .3s;
}

.parent .child:hover {
  opacity: 1;
  transition: all .3s;
}
<svg width="250" height="250">
  <g class="parent">
    <rect x="0" y="0" width="150" height="150" fill="green"/>
      
    <g class="child">
      <circle cx="30" cy="45" r="25" fill="red"/>
    </g>
    
    <g class="child">
      <rect x="60" y="80" width="60" height="30" fill="blue"/>
    </g>
  
  </g>
</svg>
2
6PO0222 15 Januari 2021, 13:04

3 jawaban

Jawaban Terbaik

Opsi termudah adalah memindahkan persegi panjang yang Anda isi ke luar .parent, di mana CSS yang ada akan berfungsi sebagaimana dimaksud karena opasitas .parent tidak diterapkan ke latar belakang hijau.

.parent:hover .child {
  opacity: 0.2;
  transition: all .3s;
}

.parent .child:hover {
  opacity: 1;
  transition: all .3s;
}
<svg width="250" height="250">

  <rect x="0" y="0" width="150" height="150" fill="green"/>
  
  <g class="parent">
    
    <g class="child">
      <circle cx="30" cy="45" r="25" fill="red"/>
    </g>
    
    <g class="child">
      <rect x="60" y="80" width="60" height="30" fill="blue"/>
    </g>
  
  </g>
</svg>
1
DBS 15 Januari 2021, 10:34

Satu-satunya harapan Anda (saya pikir) adalah menggunakan pointer-events: none.

Tapi ini akan menghindari interaksi pointer dengan elemen

.parent:hover .child {
  opacity: 0.2;
  transition: all .3s;
}

.parent .child:hover {
  opacity: 1;
  transition: all .3s;
}

.nohover {
  pointer-events: none;
}
<svg width="250" height="250">
  <g class="parent">
    <rect class="nohover" x="0" y="0" width="150" height="150" fill="green"/>
      
    <g class="child">
      <circle cx="30" cy="45" r="25" fill="red"/>
    </g>
    
    <g class="child">
      <rect x="60" y="80" width="60" height="30" fill="blue"/>
    </g>
  
  </g>
</svg>
2
vals 15 Januari 2021, 10:38

Coba seperti ini:

.parent:hover .child {
  opacity: 0.2;
  transition: all .3s;
}

.parent:hover rect:hover ~.child,
.parent .child:hover {
  opacity: 1;
  transition: all .3s;
}
<svg width="250" height="250">
  <g class="parent">
    <rect x="0" y="0" width="150" height="150" fill="green"/>
      
    <g class="child">
      <circle cx="30" cy="45" r="25" fill="red"/>
    </g>
    
    <g class="child">
      <rect x="60" y="80" width="60" height="30" fill="blue"/>
    </g>
  
  </g>
</svg>

Karena elemen rect berada sebelum elemen .child, Anda dapat memeriksa :hover selain .parent:hover dan kemudian menata elemen .child sesuai dengan itu.

1
sbgib 15 Januari 2021, 10:34