Đối lập với di chuột trong CSS là gì?

Question

Sự miêu tả. Liên kết hai trình xử lý với các phần tử phù hợp, được thực thi khi con trỏ chuột vào và rời khỏi các phần tử

Nội dung chính Show

.hover( handlerInOut )Trả về.
Trái nghĩa của hover là gì?
Di chuột được gọi trong CSS là gì?
Di chuột có phải là phần tử giả không?
Làm cách nào để kiểm tra xem một phần tử có được di chuột hay không bằng cách sử dụng CSS?

phiên bản thêm. 1. 0
- xử lýIn
  Loại. ( đối tượng sự kiện )
  Một chức năng để thực hiện khi con trỏ chuột vào phần tử
- xử lýOut
  Loại. ( đối tượng sự kiện )
  Một chức năng để thực hiện khi con trỏ chuột rời khỏi phần tử

Phương thức .hover() liên kết các trình xử lý cho cả hai sự kiện mouseenter và mouseleave. Bạn có thể sử dụng nó để đơn giản áp dụng hành vi cho một phần tử trong thời gian chuột ở trong phần tử

Gọi $( selector ).hover( handlerIn, handlerOut ) là viết tắt của

1


$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

Xem các cuộc thảo luận cho


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hover demotitle>
  <style>
  ul {
    margin-left: 20px;
    color: blue;
  }
  li {
    cursor: default;
  }
  span {
    color: red;
  }
  style>
  <script src="https://code.jquery.com/jquery-3.6.3.js">script>
head>
<body>
 
<ul>
  <li>Milkli>
  <li>Breadli>
  <li class="fade">Chipsli>
  <li class="fade">Socksli>
ul>
 
<script>
$( "li" ).hover(
  function() {
    $( this ).append( $( " ***" ) );
  }, function() {
    $( this ).find( "span" ).last().remove();
  }
);
 
$( "li.fade" ).hover(function() {
  $( this ).fadeOut( 100 );
  $( this ).fadeIn( 500 );
});
script>
 
body>
html>

0 và


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hover demotitle>
  <style>



  ul {
    margin-left: 20px;
    color: blue;
  }
  li {
    cursor: default;
  }
  span {
    color: red;
  }
  style>
  <script src="https://code.jquery.com/jquery-3.6.3.js">script>
head>
<body>
 
<ul>
  <li>Milkli>
  <li>Breadli>
  <li class="fade">Chipsli>
  <li class="fade">Socksli>
ul>
 
<script>
$( "li" ).hover(
  function() {
    $( this ).append( $( " ***" ) );
  }, function() {
    $( this ).find( "span" ).last().remove();
  }
);
 
$( "li.fade" ).hover(function() {
  $( this ).fadeOut( 100 );
  $( this ).fadeIn( 500 );
});
script>
 
body>
html>

1 để biết thêm chi tiết

ví dụ

Để thêm một kiểu đặc biệt vào danh sách các mục đang được di chuột qua, hãy thử

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hover demotitle>
  <style>
  ul {
    margin-left: 20px;
    color: blue;
  }
  li {
    cursor: default;
  }
  span {
    color: red;
  }
  style>
  <script src="https://code.jquery.com/jquery-3.6.3.js">script>
head>
<body>
 
<ul>
  <li>Milkli>
  <li>Breadli>
  <li class="fade">Chipsli>
  <li class="fade">Socksli>
ul>
 
<script>
$( "li" ).hover(
  function() {
    $( this ).append( $( " ***" ) );
  }, function() {
    $( this ).find( "span" ).last().remove();
  }
);
 
$( "li.fade" ).hover(function() {
  $( this ).fadeOut( 100 );
  $( this ).fadeIn( 500 );
});
script>
 
body>
html>

Thử nghiệm

Để thêm một kiểu đặc biệt vào các ô của bảng đang được di chuột qua, hãy thử

1

2

3

4

5

6

7


$( "td" ).hover(
  function() {



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

Để hủy liên kết ví dụ trên, hãy sử dụng

1


$( "td" ).off( "mouseenter mouseleave" );

.hover( handlerInOut )Trả về.

Sự miêu tả. Liên kết một trình xử lý duy nhất với các phần tử phù hợp, được thực thi khi con trỏ chuột vào hoặc rời khỏi các phần tử

phiên bản thêm. 1. 4
- xử lýInOut
  Loại. ( đối tượng sự kiện )
  Một chức năng để thực hiện khi con trỏ chuột vào hoặc ra khỏi phần tử

Phương thức .hover(), khi được truyền một hàm duy nhất, sẽ thực thi trình xử lý đó cho cả hai sự kiện mouseenter và mouseleave. Điều này cho phép người dùng sử dụng các phương thức chuyển đổi khác nhau của jQuery trong trình xử lý hoặc phản hồi khác nhau trong trình xử lý tùy thuộc vào


html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hover demotitle>
  <style>
  ul {
    margin-left: 20px;
    color: blue;
  }
  li {
    cursor: default;
  }
  span {
    color: red;
  }
  style>
  <script src="https://code.jquery.com/jquery-3.6.3.js">script>
head>
<body>
 
<ul>
  <li>Milkli>
  <li>Breadli>
  <li class="fade">Chipsli>
  <li class="fade">Socksli>
ul>
 
<script>
$( "li" ).hover(
  function() {
    $( this ).append( $( " ***" ) );
  }, function() {
    $( this ).find( "span" ).last().remove();
  }
);
 
$( "li.fade" ).hover(function() {
  $( this ).fadeOut( 100 );
  $( this ).fadeIn( 500 );
});
script>
 
body>
html>

5

Trái nghĩa của hover là gì?

Di chuột được gọi trong CSS là gì?

CSS. bộ chọn di chuột là một trong nhiều lớp giả được sử dụng để tạo kiểu cho các phần tử. . di chuột được sử dụng để chọn các phần tử mà người dùng di con trỏ chuột hoặc di chuột qua. Nó có thể được sử dụng trên tất cả các phần tử, không chỉ trên các liên kết

Di chuột có phải là phần tử giả không?

Cái . hover là lớp giả và. trước &. sau là các phần tử giả. Trong CSS, phần tử giả được viết sau lớp giả.

Làm cách nào để kiểm tra xem một phần tử có được di chuột hay không bằng cách sử dụng CSS?

Trả lời. Sử dụng CSS. hover Lớp giả . hover pseudo-class selector kết hợp với jQuery mousemove() để kiểm tra xem chuột có ở trên một phần tử hay không trong jQuery.

programming css

Đối lập với di chuột trong CSS là gì?

phiên bản thêm. 1. 0

ví dụ

Thử nghiệm

.hover( handlerInOut )Trả về.

phiên bản thêm. 1. 4

Trái nghĩa của hover là gì?

Di chuột được gọi trong CSS là gì?

Di chuột có phải là phần tử giả không?

Làm cách nào để kiểm tra xem một phần tử có được di chuột hay không bằng cách sử dụng CSS?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội