Hướng dẫn css after click event - css sau sự kiện nhấp chuột

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.3K20 Huy hiệu vàng128 Huy hiệu bạc134 Huy hiệu đồng20 gold badges128 silver badges134 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 / jQuery15 gold badges105 silver badges147 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.3K20 Huy hiệu vàng128 Huy hiệu bạc134 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

HTML