mouseover() mouseout() jQuery thêm/removeClass vấn đề

Question

Tôi đang cố gắng tạo hiệu ứng di chuột đơn giản bằng cách sử dụng kết hợp mouseover, mouseout, addClass và removeClass. Về cơ bản, khi người dùng di chuột qua một phần tử, tôi muốn áp dụng một đường viền khác (có màu xám 1px). Trạng thái ban đầu là "1px solid white". Tôi có một lớp được gọi là "nổi bật" mà chỉ đơn giản là có "border: 1px dashed gray" trong đó. Tôi muốn thêm rằng onmouseover lớp và loại bỏ nó trên onmouseout nhưng tôi không thể có được hiệu quả tôi muốn trừ khi tôi sử dụng! Quan trọng trong lớp "nổi bật".

Answer 1

Nghe có vẻ như bạn đã có javascript hoạt động tốt, nhưng nó chỉ là một vấn đề với specificity of your CSS rules, đó là lý do tại sao !important làm cho nó hoạt động.

Bạn chỉ cần làm cho các quy tắc css được tô sáng của bạn cụ thể hơn các quy tắc không được đánh dấu.

#someItem ul li { /* Specificity = 102 */ 
    border-color: white; 
} 

.highlight { /* Specificity = 10 -- not specific enough! */ 
    border-color: grey;  
} 

#someItem ul li.highlight { /* Specificity = 112 -- this will work */ 
    border-color: grey;  
} 

---

Sửa với giải thích thêm:
Hãy nói rằng các bộ phận liên quan của HTML của bạn trông như thế này:

<div id="someItem"> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
    </ul> 
</div> 

và bạn có CSS ​​này:

#someItem ul li { 
    border: 1px solid white; 
} 
.highlight { 
    border-color: grey; 
} 

Hiện tại, tất cả các mục danh sách trong ul trong #someItem div sẽ có đường viền màu trắng và không có lớp nào là highlight vì vậy không có gì xám.

Qua bất cứ điều gì có nghĩa là bạn muốn (trong trường hợp của bạn là một sự kiện di chuột trong jQuery), bạn thêm một lớp học để một trong các mục:

$(this).addClass('highlight'); 

HTML bây giờ sẽ giống như thế này:

<div id="someItem"> 
    <ul> 
     <li>Item 1</li> 
     <li class="highlight">Item 2</li> 
     <li>Item 3</li> 
    </ul> 
</div> 

Cho đến nay, Javascript và HTML của bạn đang hoạt động tốt, nhưng bạn không thấy đường viền màu xám! Vấn đề là CSS của bạn. Khi trình duyệt đang cố gắng quyết định cách tạo kiểu cho phần tử, nó sẽ xem xét tất cả các bộ chọn khác nhau nhắm vào một phần tử và các kiểu được xác định trong các bộ chọn đó. Nếu có hai bộ chọn khác nhau đều xác định cùng một kiểu (trong trường hợp của chúng ta, màu đường viền được tranh cãi), thì nó phải quyết định kiểu nào sẽ áp dụng và cái nào cần bỏ qua. Nó thực hiện điều này bằng phương tiện của cái được gọi là "Tính đặc hiệu" - đó là, bộ chọn cụ thể là như thế nào. Như được nêu trong HTML Dog article, nó thực hiện điều này bằng cách gán giá trị cho từng phần của công cụ chọn của bạn và một giá trị có số điểm cao nhất sẽ thắng. Những điểm là:

• yếu tố chọn (ví dụ: "ul", "li", "bảng") = 1 điểm
• lớp chọn (ví dụ: ".highlight", ".active",". menu ") = 10 điểm
• id chọn (ví dụ: "#someItem", "#mainContent") = 100 điểm

có một số quy tắc khác, ví dụ: từ khóa !important và cũng phong cách nội tuyến, nhưng đó là chủ yếu không liên quan cho điều này, uhh ... "bài học". Điều duy nhất bạn nên biết là nếu hai bộ chọn có cùng độ đặc hiệu, thì bộ chọn được xác định sau trong tệp sẽ thắng.

Trở lại với vấn đề của bạn, do CSS chúng tôi đã có trước đây, chúng ta có thể thấy tại sao nó vẫn không có một đường viền màu xám:

 
#someItem ul li = id + element + element = 100 + 1 + 1 = 102 points 
.highlight = class = 10 points 

Như đã đề cập trước đó, giải pháp là để tạo ra một selector cụ thể hơn:

 
#someItem ul li.highlight 
    = id + element + element + class 
    = 100 + 1 + 1 + 10 
    = 112 points 

Và để trả lời câu hỏi của bạn trong nhận xét, bạn không cần phải thay đổi bất kỳ javascript hoặc HTML nào để làm việc này.Nếu bạn chia nhỏ bộ chọn đó, nội dung nó nói là:

Tìm phần tử có id "someItem", bên trong tìm phần tử ul và sau đó là phần tử li có lớp "đánh dấu" .

... và bây giờ, do đơn giản .addClass() cuộc gọi mà bạn đã thực hiện trước đó, li thỏa mãn những điều kiện này, vì vậy biên giới nên bật màu xám.

Answer 2

Tôi đoán bạn đang sử dụng một phong cách nội tuyến trên yếu tố cho phong cách ban đầu:

<style type="text/css"> 
    .hover { border: 1px dashed gray; } /* will never apply */ 
</style> 

... 

<!-- this style has priority over class styles! --> 
<div style="border: 1px solid white"> 
... 
</div> 

này sẽ ghi đè lên các phong cách được áp dụng sử dụng một lớp học ... Vì vậy, thay vì sử dụng phong cách nội tuyến, chỉ cần sử dụng một lớp học ban đầu khác để áp dụng các kiểu ban đầu:

<style type="text/css"> 
    .normal { border: 1px solid white; } 
    .hover { border: 1px dashed gray; } 
</style> 

... 

<div class="normal"> 
... 
</div> 

Answer 3

Bạn đã xem xét phương pháp tiếp cận css thuần túy chưa?

Ví dụ:

someClass { 
    border: 1px solid white; 
} 

someClass:hover { 
    border: 1px dashed gray; 
} 

Lớp hover giả sẽ cung cấp cho bạn những hành vi mà bạn muốn: khi người dùng di chuyển chuột trên phần tử, nó sẽ sử dụng phong cách thấp hơn, nếu không nó sẽ sử dụng phong cách đầu tiên .

Lưu ý: khi ai đó nhận xét, điều này không hoạt động đối với các thành phần không a trong IE. Tuy nhiên nó làm việc cho tôi trong Chrome, Firefox, Safari và Opera.

Nó cũng hoạt động với mọi thành phần trong chế độ tiêu chuẩn IE8 và IE7. Tôi không có IE6 để thử nghiệm với mặc dù.

Answer 4

Đây là một ví dụ về một hover Tôi đã sử dụng:

$(".myclass").hover(jbhovershow,jbhoverhide); 


jbhovershow = function() { 
      $(this).addClass("jimtest"); 
      }; 

jbhoverhide = function() { 
      $(this).removeClass("jimtest"); 
      } 

bạn không thực sự phải phá vỡ một cái gì đó đơn giản này thành chức năng riêng biệt.

Tôi nghi ngờ vấn đề của bạn có thể có xung đột trong css - hãy thử chỉ áp dụng lớp đánh dấu của bạn bằng cách mã hóa nó hoặc nhấp chuột và xem nó có thực sự hoạt động hay không.

Hy vọng rằng sẽ giúp

Jim

Answer 5

CSS:

div.target { 
    border: 1px solid #000000; 
} 

div.target-hover { 
    border-color: #ff0000; 
} 

JS:

$("div.target").hover(
    function() { 
     $(this).addClass("target-hover"); 
    }, 
    function() { 
     $(this).removeClass("target-hover"); 
    } 
); 

tôi thường làm theo cách này. (cho phép nhiều tùy chọn hơn)

Answer 6

Từ Jquery 1.3.3 bạn sẽ có thể làm điều này đơn giản hơn một chút. Sẽ có một enhanced version of .toggleClass() có sẵn sẽ rất mạnh mẽ.

Nếu bạn không cần phải phá vỡ này ra thành một chức năng sau đó từ 1.3.3 bạn sẽ có thể chỉ cần làm:

$(".myclass").hover(function(){ $(this).toggleClass('highlight'); }); 

Nếu bạn gặp phải bao gồm quan trọng sau đó nổi bật của bạn lớp học có thể cần phải cụ thể hơn (xem CSS Specificity).

Answer 7

Hoặc bạn chỉ có thể làm điều đó với CSS đơn giản bằng cách sử dụng:

#namehere { border: 1px solid #fff; } 
#namehere:hover { border: 1px dashed #aaa }