Hướng dẫn how do i keep active state in css? - làm cách nào để giữ trạng thái hoạt động trong css?

Khi nút được nhấp, tôi muốn nó ở lại với kiểu hoạt động thay vì quay trở lại phong cách bình thường. Điều này có thể được thực hiện với CSS xin vui lòng? Tôi sử dụng nút blurb từ chủ đề Divi (WordPress). Làm ơn giúp tôi!

code:

    #blurb-hover.et_pb_blurb .et_pb_blurb_content 
    .et_pb_main_blurb_image .et-pb-icon:hover {
           color: red !important; }
    
    #blurb-hover.et_pb_blurb .et_pb_blurb_content 
    .et_pb_main_blurb_image .et-pb-icon:selected {
      background-color: #ff4b46;
      color: #fff; }

    #blurb-hover.et_pb_blurb .et_pb_blurb_content 
    .et_pb_main_blurb_image .et-pb-icon:active {
        color: white !important;
       background-color: red; 
        width: 140px;
        height: 100px; }

hỏi ngày 2 tháng 7 năm 2015 lúc 7:55Jul 2, 2015 at 7:55

4

CSS

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

1 biểu thị trạng thái tương tác (vì vậy đối với một nút sẽ được áp dụng trong quá trình báo chí),

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

2 có thể là lựa chọn tốt hơn ở đây. Tuy nhiên, kiểu dáng sẽ bị mất một khi một yếu tố khác đạt được trọng tâm.

Giải pháp thay thế tiềm năng cuối cùng bằng cách sử dụng CSS sẽ là sử dụng

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

3, giả sử các mục được nhấp là đặt các tuyến đường (ví dụ: neo) trong trang- tuy nhiên điều này có thể bị gián đoạn nếu bạn đang sử dụng định tuyến (ví dụ: góc), tuy nhiên điều này không có vẻ như ở đây .

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

Active
Focus
Target 1
Target 2
Target 3

JavaScript / jQuery

Do đó, không có cách nào trong CSS hoàn toàn chuyển đổi trạng thái theo kiểu- nếu không có công việc nào ở trên cho mình, bạn sẽ cần kết hợp với sự thay đổi trong HTML của bạn (ví dụ: dựa trên hộp kiểm) hoặc áp dụng/loại bỏ chương trình lớp sử dụng ví dụ: jQuery

$('button').on('click', function(){
    $('button').removeClass('selected');
    $(this).addClass('selected');
});

button.selected{
  color:red;
}

ItemItemItem
  

Đã trả lời ngày 2 tháng 7 năm 2015 lúc 8:01Jul 2, 2015 at 8:01

SW4SW4SW4

68.7K20 Huy hiệu vàng130 Huy hiệu bạc136 Huy hiệu đồng20 gold badges130 silver badges136 bronze badges

2

Chúng tôi sẽ sử dụng hộp kiểm ẩn. Ví dụ này bao gồm một "trên nhấp chuột - TẮT nhấp vào 'Hover / Active' State"
This example includes one "on click - off click 'hover / active' state"

-

Để tự nhấp vào nội dung:

HTML

  
   

      //MY DIV CONTENT
   
  

CSS

#activate-div{display:none}    

.my-div{background-color:#FFF} 

#activate-div:checked ~ label 
.my-div{background-color:#000}

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

1 biểu thị trạng thái tương tác (vì vậy đối với một nút sẽ được áp dụng trong quá trình báo chí),

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

2 có thể là lựa chọn tốt hơn ở đây. Tuy nhiên, kiểu dáng sẽ bị mất một khi một yếu tố khác đạt được trọng tâm.

HTML

   

      //MY DIV CONTENT
   


   //MY BUTTON STUFF

CSS

#activate-div{display:none}

.my-div{background-color:#FFF} 

#activate-div:checked + 
.my-div{background-color:#000}

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

1 biểu thị trạng thái tương tác (vì vậy đối với một nút sẽ được áp dụng trong quá trình báo chí),

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

2 có thể là lựa chọn tốt hơn ở đây. Tuy nhiên, kiểu dáng sẽ bị mất một khi một yếu tố khác đạt được trọng tâm.

Giải pháp thay thế tiềm năng cuối cùng bằng cách sử dụng CSS sẽ là sử dụng

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

3, giả sử các mục được nhấp là đặt các tuyến đường (ví dụ: neo) trong trang- tuy nhiên điều này có thể bị gián đoạn nếu bạn đang sử dụng định tuyến (ví dụ: góc), tuy nhiên điều này không có vẻ như ở đây .

JavaScript / jQuery16 gold badges108 silver badges150 bronze badges

Do đó, không có cách nào trong CSS hoàn toàn chuyển đổi trạng thái theo kiểu- nếu không có công việc nào ở trên cho mình, bạn sẽ cần kết hợp với sự thay đổi trong HTML của bạn (ví dụ: dựa trên hộp kiểm) hoặc áp dụng/loại bỏ chương trình lớp sử dụng ví dụ: jQueryDec 8, 2017 at 19:23

Đã trả lời ngày 2 tháng 7 năm 2015 lúc 8:01

68.7K20 Huy hiệu vàng130 Huy hiệu bạc136 Huy hiệu đồng

.active:active {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

0

Chúng tôi sẽ sử dụng hộp kiểm ẩn. Ví dụ này bao gồm một "trên nhấp chuột - TẮT nhấp vào 'Hover / Active' State"

-

Để tự nhấp vào nội dung:Jul 2, 2015 at 12:55

Các trạng thái nút trong CSS là gì?

Có phải trạng thái nút trống trong CSS không?

Làm thế nào lớp kiểm tra hoạt động hay không trong JavaScript?