Làm cách nào để xóa hiệu ứng di chuột trong Bootstrap?

Ivan Khalopik

2013-02-21 07. 56. 52 UTC

liên kết cố định

// Trạng thái di chuột/tập trung, nhưng chỉ dành cho các liên kết
một {
&. nhãn. bay lượn,
&. nhãn. tiêu điểm,
&. phù hiệu. bay lượn,
&. phù hiệu. tiêu điểm {
màu. @trắng;
trang trí văn bản. không ai;
con trỏ. con trỏ;
}

}

Dòng này là từ các nguồn bootstrap mới nhất. Nó thêm hành vi di chuột
chỉ dành cho các liên kết có nhãn/loại huy hiệu
Hành vi di chuột đã được khắc phục bằng cam kết này bắt đầu từ phiên bản 2. 0. 3

https. //github. com/twitter/bootstrap/cam kết/d7af2714c66ce19ba63e0871837f35dac73ecf66#less/nhãn-huy hiệu. ít hơn

Vì vậy, bạn có thể thử nâng cấp css bootstrap của mình

Bạn đã thực hiện phương pháp nào để vượt qua?
sử dụng nhiều CSS để xóa chức năng đó cho tất cả các huy hiệu
và các loại nhãn
Hiện tại, tôi đã xem qua trang CSS, nhưng nó chỉ. Rất may, tôi
chỉ sử dụng một huy hiệu và một nhãn. Ít nhất cho tới hiện tại

Tôi nghĩ rằng hành vi di chuột đã được thêm vào trong phiên bản sau của 2. khởi động x
hơn được bao gồm theo mặc định trong mô-đun bootstrap. tôi thường chỉ

bao gồm

css mới nhất và sau đó ghi đè lên những phần tôi muốn thay đổi trong
cách trình bày. tập tin tml
--

http. //tấm thảm. 1045711. n5. lảm nhảm. com/How-to-disable-bootstrap-label-button-hover-behavior-tp5720108p5720120. html

Gửi từ Tapestry - Kho lưu trữ danh sách gửi thư của người dùng tại Nabble. com
--------------------------------------------------

--
BR
Ivan

George Ludwig

2013-03-01 23. 07. 43 UTC

liên kết cố định

Cảm ơn bạn về thông tin

// Trạng thái di chuột/tập trung, nhưng chỉ dành cho các liên kết
một {
&. nhãn. bay lượn,
&. nhãn. tiêu điểm,
&. phù hiệu. bay lượn,
&. phù hiệu. tiêu điểm {
trang trí văn bản. không ai;
con trỏ. con trỏ;
}
}
Dòng này là từ các nguồn bootstrap mới nhất. Nó thêm hành vi di chuột
chỉ dành cho các liên kết có nhãn/loại huy hiệu
https. //github. com/twitter/bootstrap/cam kết/d7af2714c66ce19ba63e0871837f35dac73ecf66#less/nhãn-huy hiệu. ít hơn
Vì vậy, bạn có thể thử nâng cấp css bootstrap của mình

Bạn đã thực hiện phương pháp nào để vượt qua?
sử dụng nhiều CSS để xóa chức năng đó cho tất cả các huy hiệu
và các loại nhãn
Hiện tại, tôi đã xem qua trang CSS, nhưng nó chỉ. Rất may,

Tôi

chỉ sử dụng một huy hiệu và một nhãn. Ít nhất cho tới hiện tại

Tôi nghĩ rằng hành vi di chuột đã được thêm vào trong phiên bản sau của 2. x

khởi động

hơn được bao gồm theo mặc định trong mô-đun bootstrap. tôi thường chỉ

bao gồm

css mới nhất và sau đó ghi đè lên những phần tôi muốn thay đổi trong
cách trình bày. tập tin tml
--

http. //tấm thảm. 1045711. n5. lảm nhảm. com/How-to-disable-bootstrap-label-button-hover-behavior-tp5720108p5720120. html

Gửi từ Tapestry - Kho lưu trữ danh sách gửi thư của người dùng tại Nabble. com
--------------------------------------------------

--
BR
Ivan

Khi chúng tôi thêm hiệu ứng di chuột vào một phần tử trong CSS, nó sẽ dính vào các thiết bị cảm ứng. Trong bài viết này, chúng ta sẽ tìm hiểu cách giải quyết vấn đề này.  

Có hai cách tiếp cận có thể để giải quyết vấn đề này -

Không sử dụng JavaScript. Nó có thể được giải quyết bằng cách sử dụng truy vấn phương tiện trong CSS. Điều kiện 'di chuột. hover' đề cập đến các thiết bị hỗ trợ di chuột. Sử dụng truy vấn phương tiện theo điều kiện này đảm bảo rằng CSS bên dưới chỉ được thêm vào các thiết bị đó

đoạn mã

@media(hover: hover) {
    #btn:hover {
        background-color: #ccf6c8;
    }
}

Điều này chỉ thêm hiệu ứng di chuột trên các thiết bị hỗ trợ di chuột, nghĩa là không có hiệu ứng di chuột nào được áp dụng trên thiết bị cảm ứng. Ở đây màu nền của nút được thay đổi khi di chuột

Thí dụ. Ví dụ này cho thấy cách tiếp cận được giải thích ở trên

html

<style>

    #btn {

        background-color: #0dad78;

        

function is_touch_enabled() {
    return ('ontouchstart' in window) ||
    (navigator.maxTouchPoints > 0) ||
    (navigator.msMaxTouchPoints > 0);
}

0

        

function is_touch_enabled() {
    return ('ontouchstart' in window) ||
    (navigator.maxTouchPoints > 0) ||
    (navigator.msMaxTouchPoints > 0);
}

2

    

function is_touch_enabled() {
    return ('ontouchstart' in window) ||
    (navigator.maxTouchPoints > 0) ||
    (navigator.msMaxTouchPoints > 0);
}

4

function is_touch_enabled() {
    return ('ontouchstart' in window) ||
    (navigator.maxTouchPoints > 0) ||
    (navigator.msMaxTouchPoints > 0);
}

5

    

function is_touch_enabled() {
    return ('ontouchstart' in window) ||
    (navigator.maxTouchPoints > 0) ||
    (navigator.msMaxTouchPoints > 0);
}

7

        

function is_touch_enabled() {
    return ('ontouchstart' in window) ||
    (navigator.maxTouchPoints > 0) ||
    (navigator.msMaxTouchPoints > 0);
}

9

function is_touch_enabled() {
    return ('ontouchstart' in window) ||
    (navigator.maxTouchPoints > 0) ||
    (navigator.msMaxTouchPoints > 0);
}

5

<1_______16_______2

<1_______16_______4

<1____16_______6

        

function is_touch_enabled() {
    return ('ontouchstart' in window) ||
    (navigator.maxTouchPoints > 0) ||
    (navigator.msMaxTouchPoints > 0);
}

4

    

function is_touch_enabled() {
    return ('ontouchstart' in window) ||
    (navigator.maxTouchPoints > 0) ||
    (navigator.msMaxTouchPoints > 0);
}

4

style1style>

style4

<style6 style7style8style9 >0style8>2>

    >5

style1style6>

đầu ra

 

Sử dụng JavaScript. Trong phương pháp này, chúng tôi sẽ sử dụng JavaScript để xác định xem chúng tôi có đang sử dụng thiết bị hỗ trợ cảm ứng hay không bằng chức năng bên dưới. Sự kiện ontouchstart trả về true khi người dùng chạm vào một phần tử. hoa tiêu. maxTouchPoints trả về số điểm tiếp xúc đồng thời tối đa được thiết bị hỗ trợ. hoa tiêu. msMaxTouchPoints cũng có chức năng tương tự với tiền tố của nhà cung cấp “ms” để nhắm mục tiêu các trình duyệt IE 10 trở xuống

Do đó, hàm đã cho trả về true nếu thiết bị được bật cảm ứng. (Để đọc thêm về chức năng tham khảo. https. //www. chuyên viên máy tính. org/how-to-detect-screen-touch-device-using-javascript/)

function is_touch_enabled() {
    return ('ontouchstart' in window) ||
    (navigator.maxTouchPoints > 0) ||
    (navigator.msMaxTouchPoints > 0);
}

Nếu cảm ứng không được bật, chúng tôi sẽ thêm một lớp vào nút của mình. Lớp này thêm hiệu ứng di chuột vào nút trong CSS như được mô tả trong ví dụ bên dưới

Thí dụ. Ví dụ này cho thấy cách tiếp cận được giải thích ở trên

html

<style>

    #btn {

        background-color: #0dad78;

        

function is_touch_enabled() {
    return ('ontouchstart' in window) ||
    (navigator.maxTouchPoints > 0) ||
    (navigator.msMaxTouchPoints > 0);
}

0

        

function is_touch_enabled() {
    return ('ontouchstart' in window) ||
    (navigator.maxTouchPoints > 0) ||
    (navigator.msMaxTouchPoints > 0);
}

2

    

function is_touch_enabled() {
    return ('ontouchstart' in window) ||
    (navigator.maxTouchPoints > 0) ||
    (navigator.msMaxTouchPoints > 0);
}

4

function is_touch_enabled() {
    return ('ontouchstart' in window) ||
    (navigator.maxTouchPoints > 0) ||
    (navigator.msMaxTouchPoints > 0);
}

5

    #btn {4

        #btn {6

        #btn {8

    

function is_touch_enabled() {
    return ('ontouchstart' in window) ||
    (navigator.maxTouchPoints > 0) ||
    (navigator.msMaxTouchPoints > 0);
}

4

style1style>

style4

<21_______6         7style8        9>

    <style6 style7style8style9 >0style8>2        0style6>

Làm cách nào để xóa di chuột trong bootstrap?

Làm cách nào để đặt hover trong CSS?

Làm cách nào để đặt màu di chuột trong CSS?