1017

Tôi có một trường hợp tôi phải viết mã CSS nội tuyến và tôi muốn áp dụng kiểu di chuột trên một neo.

Làm cách nào tôi có thể sử dụng a:hoverCSS nội tuyến bên trong thuộc tính kiểu HTML?

Ví dụ: bạn không thể sử dụng các lớp CSS trong các email HTML một cách đáng tin cậy.

html css inline-styles

— Amr Elgarhy
nguồn

24

Việc nhúng html vào các ứng dụng viết blog cũng thường yêu cầu sử dụng độc quyền các kiểu nội tuyến. Đặc biệt nếu bạn đang nhúng html thông qua ứng dụng khách bên thứ ba và không có quyền truy cập vào các chủ đề của người dùng.

— providence

8

Có một tiêu chuẩn CSS được đề xuất cho việc này; không biết loại trình duyệt nào có thể hỗ trợ (gợi ý: họ có thể đang sử dụng các thẻ tùy chỉnh như -moz, v.v.): w3.org/TR/2002/WD-css-style-attr-20020515

— Kato

1

Có thể sao chép Có thể tạo kiểu giả nội tuyến không?

— Synetech

17

Thôi nào. Đôi khi, bạn chỉ đang xây dựng một nguyên mẫu trang đích và bạn không muốn phải rẽ nhánh các bảng định kiểu hoặc tạo một nhánh mẫu mới hoặc bất cứ điều gì chỉ để kiểm tra xem nút xanh có hoạt động tốt hơn không. Sheesh.

— ElBel

1

@FriendlyNeSTRIdiot Trang này đã 13 tuổi, bản nháp đã bị bỏ rơi kể từ đó.

— Tofandel

573

Câu trả lời ngắn gọn: bạn không thể.

Câu trả lời dài: bạn không nên.

Đặt tên lớp hoặc id và sử dụng biểu định kiểu để áp dụng kiểu.

:hoverlà một bộ chọn giả và, đối với CSS , chỉ có ý nghĩa trong biểu định kiểu. Không có bất kỳ kiểu tương đương nội tuyến nào (vì nó không xác định tiêu chí lựa chọn).

Phản hồi ý kiến của OP:

Xem Totally Pwn CSS với Javascript để biết một kịch bản tốt khi thêm các quy tắc CSS một cách linh hoạt. Cũng xem Thay đổi biểu định kiểu cho một số lý thuyết về chủ đề này.

Ngoài ra, đừng quên, bạn có thể thêm liên kết vào các bảng định kiểu bên ngoài nếu đó là một tùy chọn. Ví dụ,

<script type="text/javascript">
  var link = document.createElement("link");
  link.setAttribute("rel","stylesheet");
  link.setAttribute("href","http://wherever.com/yourstylesheet.css");
  var head = document.getElementsByTagName("head")[0];
  head.appendChild(link);
</script>

Chú ý: các giả định ở trên có một phần đầu .

— Jonathan Fingerland
nguồn

4

bạn có thể thêm các lớp css trong javascript

— Jonathan Fingerland

204

Có những trường hợp khác trong đó CSS nội tuyến là tùy chọn duy nhất - chẳng hạn như email HTML (ví dụ: Gmail bỏ qua CSS trừ khi nó là nội tuyến). Thật không may với Javascript bị tước trong hầu hết các ứng dụng email cũng như tôi chưa tìm thấy cách thêm: hiệu ứng di chuột.

— Simon East

24

@Kato trong khi đó là một liên kết tuyệt vời, và tôi thực sự muốn nó hoạt động, thật đáng buồn là nó không hoạt động. Chỉ để xác nhận, tôi đã thử nghiệm bằng cú pháp style="{color:green;} :hover { color: red; }"và firefox quản lý để tô màu liên kết màu xanh lá cây, nhưng bỏ qua di chuột. Chrome bỏ qua cả hai. Tiếp tục thử nghiệm sẽ là khá vô nghĩa.

— Jonathan Fingerland

9

Tôi đã không nói nó là một giải pháp làm việc. Tôi đã tuyên bố là "không hoàn toàn" chính xác để nói rằng không có tương đương nội tuyến và các bộ chọn giả không có ý nghĩa bên ngoài các bảng định kiểu. Làm thế nào là không phù hợp?

— Kato

5

Tại sao câu trả lời dài là Bạn không nên ... bạn ... bạn không nên khái quát. Tôi đã cố gắng gửi tin nhắn e-mail bằng html, nhưng đoán xem ... gmail sẽ xóa tất cả các thẻ kiểu, tất cả các tham chiếu kiểu bên ngoài và tất cả các tập lệnh. Vậy ... có cách nào để tạo kiểu di chuột màu của các liên kết bên trong các email được gửi tới gmail không? Hy vọng nó ... hy vọng là người cuối cùng chết !!! =)

— Miguel Angelo

435

Bạn có thể có được hiệu ứng tương tự bằng cách thay đổi kiểu của mình bằng JavaScript trong các tham số onMouseOvervà onMouseOuttham số, mặc dù nó cực kỳ không hiệu quả nếu bạn cần thay đổi nhiều hơn một yếu tố:

<a href="abc.html"
   onMouseOver="this.style.color='#0F0'"
   onMouseOut="this.style.color='#00F'" >Text</a>

Mở rộng đoạn trích

Ngoài ra, tôi không thể nhớ chắc chắn nếu thishoạt động trong bối cảnh này. Bạn có thể phải chuyển đổi nó với document.getElementById('idForLink').

— Alex S
nguồn

12

thật thông minh! Cũng hoạt động cho hiệu ứng di chuột màu nền<div onMouseOver="this.style.backgroundColor='#F8F8F8'" onMouseOut="this.style.backgroundColor='#FFFFFF'"> ...

— mxro

46

Phải cười vì điều này được coi là 'thông minh' :) Thật khó tưởng tượng rằng một số người không có mặt khi đây là cách nổi bật / duy nhất bạn có thể đạt được hiệu ứng này. Hoặc tệ hơn nữa là để có một 'hình ảnh' và phải trao đổi hình ảnh, chỉ để tạo hiệu ứng 'di chuột'. Làm cho tôi cảm thấy già! Nhưng đủ để nói, nó trả lời câu hỏi của OP :)

— Manachi

5

Tôi phải đồng ý với Manachi về điều này. Điều này giống như một đoạn hồi tưởng về địa lý javascript của thập niên 90; P

— Eric Castro

9

Cũ, mới, cổ hay trước. Nó trả lời câu hỏi và giúp tôi. Cảm ơn bạn, @peter.

— dùng2060451

4

Tôi cần phải làm điều này cho một email và nó đã làm việc. Cảm ơn bạn! Điều này thực sự giải quyết câu hỏi, không giống như câu trả lời được chấp nhận.

— TheStherSide

53

Bạn có thể làm điều đó tại một số điểm trong quá khứ. Nhưng bây giờ (theo bản sửa đổi mới nhất của cùng tiêu chuẩn, đó là Khuyến nghị của Ứng viên), bạn không thể.

— lông cừu
nguồn

3

tất cả các câu trả lời khác nói rằng điều đó là không thể, nhưng câu trả lời của bạn cho thấy điều đó là có thể, câu trả lời của bạn là khác nhau, tôi đang thử nghiệm nó.

— Amr Elgarhy

2

Xin lỗi, tôi chỉ kiểm tra ngày của bài viết. Nó 10 tuổi. Vì vậy, không có gì đảm bảo rằng nó nên hoạt động. Nếu có, xin vui lòng cho tôi biết quá.

— fuddin

2

Tôi đã thử nghiệm điều này:

<a href="http://www.w3.org/"           style="{color: #900}           :link {background: #ff0}           :visited {background: #fff}           :hover {outline: thin red solid}           :active {background: #00f}">...</a>

Nhưng nó không hoạt động

— Amr Elgarhy

5

Trong trường hợp bất kỳ ai bắt gặp câu trả lời này, người trả lời đã đăng câu hỏi về tính năng này tại đây: stackoverflow.com/questions/9884182/

— Kẻ

9

Chính xác hơn để nói, bạn có thể làm điều đó tại một số điểm trong quá khứ. Nhưng bây giờ (theo bản sửa đổi mới nhất của cùng tiêu chuẩn, đó là Khuyến nghị của Ứng viên), bạn không thể .

— Ilya Streltsyn

34

Tôi rất muộn khi đóng góp cho việc này, tuy nhiên tôi rất buồn khi không có ai đề xuất điều này, nếu bạn thực sự yêu cầu mã nội tuyến, điều này là có thể làm được. Tôi cần nó cho một số nút di chuột, phương pháp này là:

.hover-item {
	background-color: #FFF;
}

.hover-item:hover {
	background-color: inherit;
}

<a style="background-color: red;">
	<div class="hover-item">
		Content
	</div>
</a

Mở rộng đoạn trích

Trong trường hợp này, mã nội tuyến: "màu nền: đỏ;" là màu chuyển đổi khi di chuột, đặt màu bạn cần vào đó và sau đó giải pháp này hoạt động. Tôi nhận ra đây có thể không phải là giải pháp hoàn hảo về khả năng tương thích tuy nhiên điều này hoạt động nếu thực sự cần thiết.

— lukesrw
nguồn

4

Cảm ơn bạn. Đó là một câu trả lời tuyệt vời, tôi nghĩ rằng câu trả lời này phải là một giải pháp.

— Hovhannes Sargsyan

64

Không, OP cho biết họ muốn nó trong CSS nội tuyến bên trong thuộc tính kiểu HTML .

— jj_

3

Tôi biết, jj_- tuy nhiên phương pháp này cho phép bạn chỉ đưa một vài dòng vào CSS và sử dụng nó nhiều lần, nhiều người (bao gồm cả tôi) đã thấy đây là một lựa chọn hữu ích.

— lukesrw

2

đây phải là câu trả lời thực tế, với một sửa đổi nhỏ: không đặt bất kỳ màu nào trong kiểu, chỉ là quy tắc kế thừa từ cha mẹ khi được di chuột, sau đó đặt hai màu theo dòng.

— Hayko Koryun

4

Đây chỉ là cách "bình thường" để làm điều đó, mà mọi người đều nói là cách đúng đắn. Tuy nhiên, đó không phải là một cách nội tuyến, đó là yêu cầu ban đầu của OP.

— wcndave

31

Bạn không thể thực hiện chính xác những gì bạn mô tả, vì a:hoverlà một phần của bộ chọn, không phải là quy tắc CSS. Biểu định kiểu có hai thành phần:

selector {rules}

Kiểu nội tuyến chỉ có quy tắc; bộ chọn được ngầm định là thành phần hiện tại.

Bộ chọn là một ngôn ngữ biểu cảm mô tả một bộ tiêu chí phù hợp với các yếu tố trong một tài liệu giống như XML.

Tuy nhiên, bạn có thể đến gần, vì một stylebộ kỹ thuật có thể đi gần như mọi nơi:

<html>
  <style>
    #uniqueid:hover {do:something;}
  </style>
  <a id="uniqueid">hello</a>
</html>

— Rex M
nguồn

3

Trên thực tế bạn không thể: HTML HTML cho phép bất kỳ số lượng phần tử STYLE nào trong phần CHÍNH của tài liệu. ( w3.org/TR/html4/present/styles.html#edef-STYLE )

— Éric Araujo

2

Hoạt động trên máy của tôi. Cảm ơn!

— Josh Habdas

@ ÉricAraujo: Sau đó bọc tất cả nội dung này dưới một <html> </html>thẻ

— fuddin

30

sử dụng Javascript:

a) Thêm kiểu nội tuyến

document.head.insertAdjacentHTML('beforeend', '<style>#mydiv:hover{color:red;}</style>');

b) hoặc phương pháp khó hơn một chút - thêm "mouseover"

document.getElementById("mydiv").onmouseover= function(e){this.className += ' my-special-class'; };
document.getElementById("mydiv").onmouseleave= function(e){this.className = this.className.replace('my-special-class',''); };

Lưu ý: các kiểu nhiều từ (nghĩa là font-size) trong Javascript được viết cùng nhau :

element.style.fontSize="12px"

— T.Todua
nguồn

3

Vì câu trả lời này đã được chỉnh sửa, nên giờ nó dường như hoàn toàn không liên quan đến câu hỏi ban đầu ...

— Bill

1

Wow, đó là suy nghĩ bên ngoài hộp ... Tôi thích nó!

— theglossy1

14

Đây là ví dụ mã tốt nhất:

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 onmouseover="this.style.color='#0F0'"
 onmouseout="this.style.color='#00F'">
   Library
</a>

Mở rộng đoạn trích

Gợi ý của người điều hành: Giữ sự tách biệt các mối quan tâm của bạn.

HTML

<a
 style="color:blue;text-decoration: underline;background: white;"
 href="http://aashwin.com/index.php/education/library/"
 class="lib-link">
   Library
</a>

Mở rộng đoạn trích

Mã não

const libLink = document.getElementsByClassName("lib-link")[0];
// The array 0 assumes there is only one of these links,
// you would have to loop or use event delegation for multiples
// but we won't go into that here
libLink.onmouseover = function () {
  this.style.color='#0F0'
}
libLink.onmouseout = function () {
  this.style.color='#00F'
}

Mở rộng đoạn trích

— người dùng1476842
nguồn

10

Khai báo giả nội tuyến không được hỗ trợ trong lần lặp hiện tại của CSS (mặc dù, theo những gì tôi hiểu, nó có thể đến trong phiên bản tương lai).

Hiện tại, đặt cược tốt nhất của bạn có lẽ là chỉ xác định một khối kiểu trực tiếp bên trên liên kết bạn muốn tạo kiểu:

<style type="text/css">
    .myLinkClass:hover {text-decoration:underline;}
</style>
<a href="/foo" class="myLinkClass">Foo!</a>

— mực
nguồn

4

Ý tưởng đó may mắn sẽ bị loại bỏ. (Xem danh sách.w3.org /Archives / Public / www-style / 2009Jun / 0341.html , trong "Bản nháp làm việc bị bỏ rơi".)

— Ms2ger

3

Đây là một . thiếu trong câu trả lời này.

— Joel

9

Như đã chỉ ra, bạn không thể đặt các kiểu nội tuyến tùy ý cho di chuột, nhưng bạn có thể thay đổi kiểu của con trỏ di chuột trong CSS bằng cách sử dụng thông tin sau trong thẻ thích hợp:

style="cursor: pointer;"

— rutherford
nguồn

2

đó nên là câu trả lời tốt nhất

— Vladislav Guleaev

6

<style>a:hover { }</style>
<a href="/">Go Home</a>

Hover là một lớp giả, và do đó không thể được áp dụng với một thuộc tính style. Nó là một phần của bộ chọn.

— Tham gia
nguồn

2

@Derek trong trường hợp vẫn còn quan tâm / cho bất kỳ ai khác đang đọc: "~ /" (dấu gạch chéo phía trước) là một tham chiếu phía máy chủ đến gốc ứng dụng trong các ứng dụng web asp.net. (Tất nhiên gốc ứng dụng có thể là một thư mục con). Nó được sử dụng ở đây sẽ không chính xác, do đó lý do câu trả lời đã được chỉnh sửa kể từ khi bạn đặt câu hỏi (tôi nghi ngờ).

— Chris

5

Bạn có thể làm được việc này. Nhưng không phải trong phong cách nội tuyến. Bạn có thể sử dụng onmouseovervà onmouseoutcác sự kiện:

<div style="background: #333; padding: 10px; cursor: pointer"
   onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
      Hover on me!
</div>

Mở rộng đoạn trích

4

Theo ý kiến của bạn, dù sao bạn cũng đang gửi một tệp JavaScript. Thực hiện cuộn qua trong JavaScript. Phương thức của jQuery$.hover() làm cho nó dễ dàng, giống như mọi trình bao bọc JavaScript khác. Nó cũng không quá khó trong JavaScript thẳng.

— Giấm Shah
nguồn

Mặc dù đây là một công việc xung quanh nhưng nó có một câu trả lời rất hay cho tôi và câu trả lời tốt nhất nếu thực sự không thể viết di chuột nội tuyến

— Amr Elgarhy

4

Không có cách nào để làm điều này. Tùy chọn của bạn là sử dụng JavaScript hoặc khối CSS.

Có thể có một số thư viện JavaScript sẽ chuyển đổi một thuộc tính kiểu độc quyền thành một khối kiểu. Nhưng sau đó, mã sẽ không tuân thủ tiêu chuẩn.

— tình yêu
nguồn

2

Tôi chỉ tìm ra một giải pháp khác.

Vấn đề của tôi: Tôi có một <a>thẻ xung quanh một số slide / trình xem nội dung chính cũng như <a>các thẻ trong phần chân trang. Tôi muốn họ đi đến cùng một vị trí trong IE, vì vậy toàn bộ đoạn văn sẽ được gạch chân onHover, mặc dù chúng không phải là liên kết: toàn bộ slide là một liên kết. IE không biết sự khác biệt. Tôi cũng có một số liên kết thực tế trong phần chân trang của mình cần phải gạch chân và thay đổi màu sắc onHover. Tôi nghĩ rằng tôi sẽ phải đặt các kiểu nội tuyến với các thẻ chân trang để thay đổi màu sắc, nhưng lời khuyên từ phía trên cho thấy điều này là không thể.

Giải pháp: Tôi đã cho các chân trang liên kết hai lớp khác nhau và vấn đề của tôi đã được giải quyết. Tôi đã có thể onHoverthay đổi màu trong một lớp, có các slide onHoverkhông có thay đổi / gạch chân màu và vẫn có thể có HREFS bên ngoài ở chân trang và các slide cùng một lúc!

— Liz
nguồn

1

Tôi đồng ý với bóng tối . Bạn có thể sử dụng onmouseovervà onmouseoutsự kiện để thay đổi CSS thông qua JavaScript.

Và đừng nói mọi người cần kích hoạt JavaScript. Đây chỉ là một vấn đề về kiểu dáng, vì vậy sẽ không có vấn đề gì nếu có một số khách truy cập không có JavaScript;) Mặc dù hầu hết Web 2.0 đều hoạt động với JavaScript. Xem Facebook chẳng hạn (rất nhiều JavaScript) hoặc Myspace .

— Jaysn
nguồn

0

Điều này khá muộn trong trò chơi, nhưng khi nào bạn sẽ sử dụng JavaScript trong Email HTML? Ví dụ: tại công ty tôi hiện đang làm việc (vần với Abodee), chúng tôi sử dụng mẫu số chung thấp nhất cho hầu hết các chiến dịch tiếp thị qua email - và JavaScript không được sử dụng. Không bao giờ. Trừ khi bạn đang đề cập đến một số loại tiền xử lý.

Như đã đề cập trong một bài đăng liên quan: "Lotus Notes, Mozilla Thunderbird, Outlook Express và Windows Live Mail dường như đều hỗ trợ một số loại thực thi JavaScript. Không có gì khác."

Liên kết đến bài viết mà từ đó bài viết này được thực hiện: [ http://en.wikipedia.org/wiki/Comparison_of_e-mail_clents]

Ngoài ra, làm thế nào để di chuột dịch sang thiết bị di động? Đó là lý do tại sao tôi thích câu trả lời từ phía trên:Long answer: you shouldn't.

Nếu bất cứ ai có cái nhìn sâu sắc hơn về chủ đề này, xin vui lòng sửa cho tôi. Cảm ơn bạn.

— Shawn Spencer
nguồn

0

Vì vậy, đây không hoàn toàn là những gì người dùng đang tìm kiếm, nhưng tôi thấy câu hỏi này đang tìm kiếm câu trả lời và đưa ra một cái gì đó liên quan. Tôi đã có một loạt các yếu tố lặp lại cần một màu sắc / di chuột mới cho một tab bên trong chúng. Tôi sử dụng tay lái, là chìa khóa cho giải pháp của tôi, nhưng các ngôn ngữ tạo mẫu khác cũng có thể hoạt động.

Tôi đã xác định một số màu và chuyển chúng vào mẫu tay lái cho từng thành phần. Ở đầu mẫu tôi đã xác định thẻ kiểu và đặt lớp tùy chỉnh và màu di chuột.

<style type="text/css">
    .{{chart.type}}-tab-hover:hover {
        background-color: {{chart.chartPrimaryHighlight}} !important;
    }
</style>

Sau đó, tôi đã sử dụng kiểu trong mẫu:

<span class="financial-aid-details-header-text {{chart.type}}-tab-hover">
   Payouts
</span>

Bạn có thể không cần !important

— webhound
nguồn

0

bạn có thể viết mã theo nhiều kiểu khác nhau

đầu tiên tôi có thể viết cái này

html

<a href="https://www.google.com/" onMouseOver="this.style.color='red'"
        onMouseOut="this.style.color='blue'" class="one">Hello siraj</a>

css

.one{
  text-decoration: none;
}

bạn có thể thử một cách khác

html

<a href="https://www.google.com/" class="one">Hello siraj</a>

css

.one{
text-decoration: none;
}

.one:hover{
color:blue;
}

.one:active{
color: red;
}

bạn cũng có thể thử di chuột trong jquery

tập lệnh java

$(document).ready(function(){
  $("p").hover(function(){
    $(this).css("background-color", "yellow");
    }, function(){
    $(this).css("background-color", "pink");
  });
});

html

<p>Hover the mouse pointer over this paragraph.</p>

trong mã này, bạn có ba hàm trong jquery trước tiên bạn đã sẵn sàng một hàm là cơ bản của hàm jquery, sau đó bạn có một hàm di chuột trong hàm này khi bạn di con trỏ tới văn bản, màu sẽ được thay đổi và tiếp theo Khi bạn nhả con trỏ đến văn bản, nó sẽ có màu khác và đây là chức năng thứ ba

— Siraj Ahmed
nguồn

Vui lòng tránh đăng các câu trả lời trùng lặp

— Simas Joneliunas

ok thưa ngài simas-joneliunas

— Siraj Ahmed

Không có cách tiếp cận nào trong số này giải quyết vấn đề được thể hiện trong câu hỏi. Bạn hoàn toàn không thể sử dụng JS trong một email có định dạng HTML và cách tiếp cận khác mà bạn đề xuất sử dụng các lớp được loại trừ rõ ràng.

— Quentin

0

Bây giờ có thể với Hacss .

— Nick Saunders
nguồn

-1

Tôi đã phải tránh javascript, nhưng có thể đi với mã phía máy chủ.

Vì vậy, tôi đã tạo một id, tạo một khối kiểu, tạo liên kết với id đó. Có HTML hợp lệ của nó.

a {
  text-decoration: none;
  color: blue; 
}

a:hover {
  color: blue;
  font-weight: bold;
}

<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-123"] { color: green;  } 
  a[data-hover="rnd-id-123"]:hover { color: red; }
</style>
<a data-hover="rnd-id-123">some link 1</a>

<br>

<!-- some code in the interpreter you use, to generate the data-hover id -->
<style>
  a[data-hover="rnd-id-456"] { color: purple;  }
  a[data-hover="rnd-id-456"]:hover { color: orange; }
</style>
<a data-hover="rnd-id-456">some link 2</a>

Mở rộng đoạn trích

— BananaAcid
nguồn

-2

Bạn chỉ có thể sử dụng lớp giả a:hovertrong các biểu định kiểu ngoài. Vì vậy, tôi khuyên bạn nên sử dụng một tờ phong cách bên ngoài. Mã này là:

a:hover {color:#FF00FF;}   /* Mouse-over link */

— người dùng1466 310
nguồn

Chắc chắn bạn không cần trang bên ngoài, chỉ cần sử dụng stylethẻ.

— Dmitri Zaitsev

-2

Bạn có thể làm id bằng cách thêm một lớp nhưng không bao giờ nội tuyến.

<style>.hover_pointer{cursor:pointer;}</style>
<div class="hover_pointer" style="font:bold 12pt Verdana;">Hello World</div>

2 dòng nhưng bạn có thể sử dụng lại lớp ở mọi nơi.

— bọ cánh cứng
nguồn

-3

Vấn đề của tôi là tôi đang xây dựng một trang web sử dụng rất nhiều biểu tượng hình ảnh phải được hoán đổi bởi một hình ảnh khác khi di chuột (ví dụ: hình ảnh màu xanh lam chuyển sang màu đỏ khi di chuột). Tôi đã tạo ra giải pháp sau đây cho việc này:

.container div {
  width: 100px;
  height: 100px;
  background-size: 100px 100px;
}
.container:hover .withoutHover {
  display: none;
}
.container .withHover {
  display: none;
}
.container:hover .withHover {
  display: block;
}

<p>Hover the image to see it switch with the other. Note that I deliberately used inline CSS because I decided it was the easiest and clearest solution for my problem that uses more of these image pairs (with different URL's).
</p>
<div class=container>
<div class=withHover style="background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQrqRsWFJ3492s0t0NmPEcpTQYTqNnH188R606cLOHm8H2pUGlH')"></div>
<div class=withoutHover style="background-image: url('http://i.telegraph.co.uk/multimedia/archive/03523/Cat-Photo-Bombs-fa_3523609b.jpg')"></div>
</div>

Tôi giới thiệu một container chứa cặp hình ảnh. Cái đầu tiên có thể nhìn thấy và cái còn lại bị ẩn (display: none). Khi di chuột vào vùng chứa, cái đầu tiên sẽ bị ẩn (display: none) và cái thứ hai hiển thị lại (display: block).

— Joool Geussens
nguồn

Làm thế nào để viết một: di chuột trong CSS nội tuyến?

sử dụng Javascript: