Làm cách nào để thêm một lớp mới vào một phần tử động?

Question

Có cách nào để thêm lớp CSS mới vào một phần tử trên :hover không?

Giống như đối với jQuery, nhưng dịch sang CSS:

$(element).addClass('someclass'); 

Answer 1

Câu trả lời ngắn không :)

Nhưng bạn chỉ có thể sử dụng CSS tương tự cho các di chuột như vậy:

a:hover, .hoverclass { 
    background:red; 
} 

Có thể nếu bạn giải thích lý do bạn cần thêm lớp, có thể có giải pháp tốt hơn?

Answer 2

chỉ sử dụng CSS, không có. Bạn cần sử dụng jQuery để thêm nó.

Answer 3

CSS thực sự không có khả năng sửa đổi một đối tượng theo cách tương tự như JavaScript, vì vậy trong ngắn hạn - không.

Answer 4

:hover là một pseudoclass, vì vậy bạn có thể đặt tờ khai CSS của bạn có:

a:hover { 
    color: #f00; 
} 

Bạn cũng có thể sử dụng một danh sách các bộ chọn để áp dụng tờ khai CSS để một yếu tố dao động hoặc một phần tử với một lớp nhất định:

.some-class, 
a:hover { 
    color: #f00; 
} 

Answer 5

lý do tại sao @Marco Berrocl nhận được phản hồi tiêu cực và câu trả lời của anh ấy hoàn toàn đúng là về việc sử dụng thư viện để tạo một số hoạt ảnh, vì vậy tôi cần gọi lớp đó trong phần tử không sao chép mã từ thư viện tôi chậm.

vì vậy tôi nghĩ rằng di chuột không phải là câu trả lời và ông nên sử dụng jquery hoặc javascript trong nhiều trường hợp

Answer 6

Kể từ khi tất cả mọi người đã cho bạn câu trả lời jQuery/JS vào đó, tôi sẽ cung cấp một giải pháp bổ sung. Câu trả lời cho câu hỏi của bạn vẫn không, nhưng bằng cách sử dụng LESS (một bộ xử lý trước CSS) bạn có thể làm điều này một cách dễ dàng.

.first-class { 
    background-color: yellow; 
} 
.second-class:hover { 
    .first-class; 
} 

Rất đơn giản, bất cứ lúc nào bạn di chuột qua .second-class nó sẽ cung cấp cho nó tất cả các thuộc tính của .first-class. Lưu ý rằng nó sẽ không thêm lớp vĩnh viễn, chỉ cần di chuột. Bạn có thể tìm hiểu thêm về LESS đây: Getting Started with LESS

Dưới đây là một cách để làm điều đó Sass cũng như:

.first-class { 
    background-color: yellow; 
} 
.second-class { 
    &:hover { 
    @extend .first-class; 
    } 
} 

Answer 7

Đây là cách bạn làm điều đó:

var e = document.getElementById('myIdName'); 
var value = window.getComputedStyle(e, null).getPropertyValue("zIndex"); 
alert('z-index: ' + value);