2010-07-15 34 views
5

tôi có một a:hover cho tất cả các liên kết của tôi trên trang của mình:Ghi đè css cho một div cụ thể?

a:hover { 
    background-color: blue; 
    text-decoration: underline; 
    color: black; 
} 

nhưng nhưng có những cái cụ thể trong một div mà tôi không muốn bất cứ điều gì xảy ra khi bạn di chuột qua chúng, vì vậy tôi có thể làm điều gì đó như thế này?

#what_we_offer a:hover { 
    background-color: none: 
    text-decoration: none; 
    color: none; 
} 

về cơ bản tôi không muốn thực hiện bất kỳ điều nào ở trên khi nó di chuột qua các liên kết cụ thể đó.

nhờ

Trả lời

6
#what_we_offer a:hover { 
    background-color: transparent; 
    text-decoration: none; 
    color: none; 
} 

sử dụng trong suốt thay vì không có tác dụng.

cảm ơn tất cả các câu trả lời.

9

Có nên hoạt động tốt, mặc dù bạn có thể không muốn thiết lập none trừ khi bạn thực sự không muốn bất kỳ phong cách ... thiết lập cơ sở màu sắc của bạn vv nên hoạt động tốt.

#what_we_offer a:hover { 
    background-color:#fff;/*presuming was originally white*/ 
    text-decoration:none; 
    color:#000;/*presuming was originally black*/ 
} 

PS Tôi không chắc chắn nếu nó chỉ là một lỗi đánh máy, nhưng gốc background-color:none: dòng của bạn đã chấm dứt với một dấu hai chấm vs một dấu chấm phẩy vấn đề như vậy, nó sẽ gây ra.

+0

không có tác dụng đối với tôi, liều không phân bổ 'không' không hoạt động. –

+0

Đầu tiên là "ghi đè" của bạn cho "#what_we_offer" sau mặc định: di chuột hoặc trước nó? Thứ hai, nếu bạn sử dụng mã của tôi ở trên, bạn sẽ nhận được gì? – scunliffe

3

Thay vì sử dụng id với việc sử dụng css Lớp

/* for link where you want to change color on hover */ 
    .Link a:hover { 
     background-color: none: 
     text-decoration: none; 
     color: red; 
    } 

/* for link where you dont want to change color on hover */ 
    a:hover { 
     background-color: none: 
     text-decoration: none; 
     color: none; 
    } 
+1

đối với 'id' so với' lớp' - tất cả đều phụ thuộc nếu @Mo có 1 div đặc biệt hoặc một tập hợp các div đặc biệt. – scunliffe

+0

'không' được quy cho liều nền màu không hoạt động –

+0

có một div đặc biệt của nó và đó là lý do tại sao tôi sử dụng ID. –

0

Có, nhưng hãy cẩn thận rằng a: hover {} nên đến trước khi #what_we_offer a: hover {}.

+2

Vì chúng có các đặc tính khác nhau, thứ tự thực sự không quan trọng. – Quentin

+0

@David Dorward: cảm ơn vì đã lưu ý về điều này. – ttchong

-4
a:hover { 
    background-color: none: 
    text-decoration: none; 
    color: none; 
} 

Điều này là chính xác.

Nếu bạn muốn chỉ trang cụ thể, thêm

body-id a:hover { 
    background-color: none: 
    text-decoration: none; 
    color: none; 
} 
+0

Không đúng (không có màu nào), bạn muốn sử dụng bộ chọn id, không phải bộ chọn loại, câu hỏi cho biết * div * không * trang * và bạn chưa định dạng mã của mình. – Quentin

+0

Câu trả lời của bạn không chính xác. Nếu anh ta có màu nền mặc định, trang trí văn bản, vv cho div đó thì nó sẽ mờ dần khi chuột được di chuyển qua div đó. Tất cả các thuộc tính này nên được đặt thành thuộc tính mặc định cho div đó trong khối "a: hover". –

0

Tôi nghĩ rằng nếu bạn làm ngược lại những gì Pranav nói, bạn có thể có ít thay đổi i, e

 


/* for link where you ***DO*** NOT want to change color on hover */ 
    .Link a:hover { 
     background-color: none: 
     text-decoration: none; 
     color: red; 
    } 

/* for link where you want to change color on hover */ 
    a:hover { 
     background-color: none: 
     text-decoration: none; 
     color: none; 
    } 

vì vậy bạn cần thêm lớp cho một href trong một số DIV cụ thể

-1

Bạn có thể sử dụng bộ chọn CSS. Điều tốt nhất tôi nghĩ bạn có thể làm là sử dụng công cụ chọn not. Hãy để tôi chỉ cho bạn một ví dụ:

<html> 
     <head> 
       <style type="text/css"> 
         a:not([not_custom]){ 
           background: #00FF00; 
           color: #FF0000; 
         }      
       </style> 
     </head> 
     <body> 
       <div> 
         <a href="">Test 1</a> 
         <a href="" not_custom="">Test 2</a> 
         <a href="">Test 3</a> 
         <a href="" not_custom="">Test 4</a> 
         <a href="">Test 5</a> 
         <a href="" not_custom="">Test 6</a> 
       </div> 
     </body> 
</html> 

Như bạn thấy, tôi đang định a phong cách sử dụng bộ chọn not. Vì vậy, tôi nói rằng tôi muốn đặt một nền màu xanh lá cây và một màu đỏ cho tất cả các a mà không có thuộc tính not_custom. Do đó, bạn có thể thấy rằng Bài kiểm tra 1, Bài kiểm tra 3 và Bài kiểm tra 5 sẽ có style được xác định và Bài kiểm tra 2, Bài kiểm tra 4 và Bài kiểm tra 6 sẽ bình thường, không có kiểu.

LƯU Ý: bạn có thể xác định thuộc tính bạn muốn. Bạn không phải đặt tên là not_custom. Nó có thể được gọi là whatever nếu bạn muốn.

+0

Không tạo nên các thuộc tính khi bạn đang viết HTML (trừ khi bạn đang viết HTML5 (mặc dù nó vẫn là một bản nháp) và bạn tuân theo các giới hạn của nó về những thuộc tính tùy chỉnh nào có thể được đặt tên (mà bạn không). not' không thực sự được hỗ trợ rộng rãi, đủ để sử dụng nghiêm túc (đặc biệt là nếu bạn kết thúc với văn bản không đọc được nếu nó không thành công, có thể là trường hợp trong tình huống này) – Quentin

1

Khi bạn muốn ghi đè giá trị CSS, bạn có thể làm hai việc: thêm các khai báo CSS mới sau khi khai báo CSS bạn muốn ghi đè hoặc sử dụng "! Quan trọng" .. Vì vậy, đối với vấn đề của bạn, bạn có thể thử:

a.reset:hover { 
background-color: #FFFFFF; 
text-decoration: none; 
color: #000000; 
} 

.. và sau đó thêm các liên kết bạn muốn ghi đè lên lớp mới này:

<a href="#" class="reset">Link with reset</a> 

Nhưng lớp CSS này phải được khai báo sau khi bạn bình thường "một "tuyên bố thẻ hoặc điều này sẽ không hoạt động.

Một cách khác là sử dụng! Quan trọng nhưng tôi khuyên bạn không nên lạm dụng vấn đề này. Nhưng đối trọng đó là cách nhanh nhất và an toàn nhất để chắc chắn nó sẽ làm việc:

a.reset:hover { 
background-color: #FFFFFF !important; 
text-decoration: none !important; 
color: #000000 !important; 
} 

.. và cái này bạn có thể thêm bất cứ nơi nào trong file CSS của bạn và bất kỳ liên kết với "thiết lập lại" class sẽ nhận được những phong cách: nền trắng, không trang trí văn bản và văn bản màu đen.

Oh và cho nền bạn thử nến: nền: không; và sẽ xóa tất cả các kiểu nền .. background-color, background-image, vv

Lưu ý: id được sử dụng để tham chiếu một phần tử và nó phải là duy nhất .. và các lớp được sử dụng để tham chiếu nhiều phần tử . Nhiều sử dụng cùng một id như bạn sẽ sử dụng một lớp css .. bạn có thể phanh javascript và nó sẽ không xác nhận HTML của bạn.

Các vấn đề liên quan