Làm thế nào để ảnh hưởng đến các yếu tố khác khi một yếu tố được di chuột

Những gì tôi muốn làm là khi một cái nào đó divđược di chuột, nó sẽ ảnh hưởng đến các thuộc tính của cái khác div.

Ví dụ, trong bản demo JSFiddle này , khi bạn di chuột qua #cubenó sẽ thay đổi background-colornhưng điều tôi muốn là khi tôi di chuột qua #container, #cubesẽ bị ảnh hưởng.

div {
  outline: 1px solid red;
}
#container {
  width: 200px;
  height: 30px;
}
#cube {
  width: 30px;
  height: 100%;
  background-color: red;
}
#cube:hover {
  width: 30px;
  height: 100%;
  background-color: blue;
}

<div id="container">

  <div id="cube">
  </div>

</div>

Nếu khối lập phương trực tiếp bên trong container:

#container:hover > #cube { background-color: yellow; }

Nếu khối lập phương bên cạnh (sau thẻ đóng container) thì container:

#container:hover + #cube { background-color: yellow; }

Nếu khối lập phương ở đâu đó bên trong container:

#container:hover #cube { background-color: yellow; }

Nếu khối là anh chị em của container:

#container:hover ~ #cube { background-color: yellow; }

Trong ví dụ cụ thể này, bạn có thể sử dụng:

#container:hover #cube {
    background-color: yellow;   
}

Ví dụ này chỉ hoạt động vì cubelà một đứa trẻ của container. Đối với các kịch bản phức tạp hơn, bạn cần sử dụng CSS khác nhau hoặc sử dụng JavaScript.

Sử dụng bộ chọn anh chị em là giải pháp chung để tạo kiểu cho các phần tử khác khi di chuột qua một phần tử đã cho, nhưng nó chỉ hoạt động nếu các phần tử khác tuân theo phần tử đã cho trong DOM . Chúng ta có thể làm gì khi các yếu tố khác thực sự phải ở trước phần tử lơ lửng? Giả sử chúng tôi muốn triển khai tiện ích xếp hạng thanh tín hiệu như bên dưới:

Điều này thực sự có thể được thực hiện dễ dàng bằng cách sử dụng mô hình flexbox CSS, bằng cách đặt flex-directionthành reverse, để các phần tử được hiển thị theo thứ tự ngược lại với mô hình chúng có trong DOM. Ảnh chụp màn hình ở trên là từ một widget như vậy, được thực hiện bằng CSS thuần túy.

Flexbox được hỗ trợ rất tốt bởi 95% các trình duyệt hiện đại.

.rating {
  display: flex;
  flex-direction: row-reverse;
  width: 9rem;
}
.rating div {
  flex: 1;
  align-self: flex-end;
  background-color: black;
  border: 0.1rem solid white;
}
.rating div:hover {
  background-color: lightblue;
}
.rating div[data-rating="1"] {
  height: 5rem;
}
.rating div[data-rating="2"] {
  height: 4rem;
}
.rating div[data-rating="3"] {
  height: 3rem;
}
.rating div[data-rating="4"] {
  height: 2rem;
}
.rating div[data-rating="5"] {
  height: 1rem;
}
.rating div:hover ~ div {
  background-color: lightblue;
}

<div class="rating">
  <div data-rating="1"></div>
  <div data-rating="2"></div>
  <div data-rating="3"></div>
  <div data-rating="4"></div>
  <div data-rating="5"></div>
</div>

Cảm ơn rất nhiều đến Mike và Robertc vì những bài viết hữu ích của họ!

Nếu bạn có hai yếu tố trong HTML của mình và bạn muốn :hover vượt qua một và nhắm mục tiêu thay đổi kiểu trong hai yếu tố kia thì hai yếu tố phải liên quan trực tiếp - cha mẹ, con cái hoặc anh chị em. Điều này có nghĩa là hai phần tử phải là một trong phần tử kia hoặc cả hai phải được chứa trong cùng một phần tử lớn hơn.

Tôi muốn hiển thị các định nghĩa trong một hộp ở phía bên phải của trình duyệt khi người dùng của tôi đọc qua trang web của tôi và :hovercác điều khoản được tô sáng; do đó, tôi không muốn phần tử 'định nghĩa' được hiển thị bên trong phần tử 'văn bản'.

Tôi gần như đã bỏ cuộc và chỉ thêm javascript vào trang của mình, nhưng đây là tương lai nguy hiểm đấy! Chúng ta không cần phải đưa ra thông tin ngược từ CSS và HTML cho chúng ta biết nơi chúng ta phải đặt các yếu tố của mình để đạt được các hiệu ứng mà chúng ta muốn! Cuối cùng chúng tôi đã thỏa hiệp.

Mặc dù các phần tử HTML thực tế trong tệp phải được lồng hoặc chứa trong một phần tử để trở thành :hovermục tiêu hợp lệ cho nhau, positionthuộc tính css có thể được sử dụng để hiển thị bất kỳ phần tử nào bạn muốn. Tôi đã sử dụng vị trí: cố định để đặt mục tiêu cho :hoverhành động của mình , nơi tôi muốn nó trên màn hình của người dùng bất kể vị trí của nó trong tài liệu HTML.

Các html:

<div id="explainBox" class="explainBox"> /*Common parent*/

  <a class="defP" id="light" href="http://en.wikipedia.or/wiki/Light">Light                            /*highlighted term in text*/
  </a> is as ubiquitous as it is mysterious. /*plain text*/

  <div id="definitions"> /*Container for :hover-displayed definitions*/
    <p class="def" id="light"> /*example definition entry*/ Light:
      <br/>Short Answer: The type of energy you see
    </p>
  </div>

</div>

Các css:

/*read: "when user hovers over #light somewhere inside #explainBox
    set display to inline-block for #light directly inside of #definitions.*/

#explainBox #light:hover~#definitions>#light {
  display: inline-block;
}

.def {
  display: none;
}

#definitions {
  background-color: black;
  position: fixed;
  /*position attribute*/
  top: 5em;
  /*position attribute*/
  right: 2em;
  /*position attribute*/
  width: 20em;
  height: 30em;
  border: 1px solid orange;
  border-radius: 12px;
  padding: 10px;
}

Trong ví dụ này, mục tiêu của một :hoverlệnh từ một phần tử bên trong #explainBoxphải hoặc #explainBoxhoặc bên trong #explainBox. Các thuộc tính vị trí được gán cho #def địnhs buộc nó xuất hiện ở vị trí mong muốn (bên ngoài #explainBox) mặc dù về mặt kỹ thuật nằm ở vị trí không mong muốn trong tài liệu HTML.

Tôi hiểu rằng nó được coi là hình thức xấu để sử dụng giống nhau #idcho nhiều hơn một yếu tố HTML; tuy nhiên, trong trường hợp này, các trường hợp #lightcó thể được mô tả độc lập do vị trí tương ứng của chúng trong #idcác phần tử duy nhất . Có bất kỳ lý do để không lặp lại id #lighttrong trường hợp này?

Chỉ điều này làm việc cho tôi:

#container:hover .cube { background-color: yellow; }

Trong trường hợp .cubelà CssClass của #cube.

Đã thử nghiệm trên Firefox , Chrome và Edge .

Đây là một ý tưởng khác cho phép bạn ảnh hưởng đến các yếu tố khác mà không cần xem xét bất kỳ bộ chọn cụ thể nào và chỉ bằng cách sử dụng :hovertrạng thái của thành phần chính.

Đối với điều này, tôi sẽ dựa vào việc sử dụng các thuộc tính tùy chỉnh (biến CSS). Như chúng ta có thể đọc trong đặc tả :

Các thuộc tính tùy chỉnh là các thuộc tính thông thường , vì vậy chúng có thể được khai báo trên bất kỳ phần tử nào, được giải quyết bằng các quy tắc xếp tầng và thừa kế thông thường ...

Ý tưởng là xác định các thuộc tính tùy chỉnh trong phần tử chính và sử dụng chúng để định kiểu các phần tử con và vì các thuộc tính này được kế thừa, chúng ta chỉ cần thay đổi chúng trong phần tử chính khi di chuột.

Đây là một ví dụ:

#container {
  width: 200px;
  height: 30px;
  border: 1px solid var(--c);
  --c:red;
}
#container:hover {
  --c:blue;
}
#container > div {
  width: 30px;
  height: 100%;
  background-color: var(--c);
}

<div id="container">
  <div>
  </div>
</div>

Tại sao điều này có thể tốt hơn so với việc sử dụng bộ chọn cụ thể kết hợp với di chuột?

Tôi có thể cung cấp ít nhất 2 lý do khiến phương pháp này trở thành một lý do tốt để xem xét:

1. Nếu chúng ta có nhiều phần tử lồng nhau có chung kiểu, điều này sẽ tránh cho chúng ta bộ chọn phức tạp để nhắm mục tiêu tất cả chúng vào di chuột. Sử dụng thuộc tính Tùy chỉnh, chúng tôi chỉ cần thay đổi giá trị khi di chuột vào phần tử cha.
2. Một thuộc tính tùy chỉnh có thể được sử dụng để thay thế một giá trị của bất kỳ thuộc tính nào và cũng là một phần giá trị của nó. Ví dụ chúng ta có thể xác định một tài sản tuỳ chỉnh cho một màu sắc và chúng tôi sử dụng nó trong vòng một border, linear-gradient, background-color, box-shadowvv Điều này sẽ tránh được chúng tôi Reseting tất cả những tài sản trên di chuột.

Đây là một ví dụ phức tạp hơn:

.container {
  --c:red;
  width:400px;
  display:flex;
  border:1px solid var(--c);
  justify-content:space-between;
  padding:5px;
  background:linear-gradient(var(--c),var(--c)) 0 50%/100% 3px no-repeat;
}
.box {
  width:30%;
  background:var(--c);
  box-shadow:0px 0px 5px var(--c);
  position:relative;
}
.box:before {
  content:"A";
  display:block;
  width:15px;
  margin:0 auto;
  height:100%;
  color:var(--c);
  background:#fff;
}

/*Hover*/
.container:hover {
  --c:blue;
}

<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>

Như chúng ta có thể thấy ở trên, chúng ta chỉ cần một khai báo CSS để thay đổi nhiều thuộc tính của các thành phần khác nhau.