почему свойство непрозрачности CSS не работает на кликнем изображении

Question

почему свойство непрозрачности CSS не работает на кликнем изображении

Когда вы используете android:background, вы заменяете большую часть стиля и внешнего вида кнопки с пустым цветом.

Обновление: Начиная с версии версии 23.0.0 из AppCompat , существует новый стиль Widget.AppCompat.Button.Colored , который использует вашу тему colorButtonNormal для отключенного цвета и colorAccent для включенного цвета.

Это позволяет применить его к вашей кнопке напрямую через

. Если вам нужны пользовательские colorButtonNormal или colorAccent, вы можете использовать ThemeOverlay, как описано в этот прокончик и android:theme на кнопке.

Предыдущий ответ

Вы можете использовать вытаскиваемый в вашем каталоге v21 для вашего фона, например:

Это гарантирует, что цвет фона будет ?attr/colorPrimary и будет иметь анимацию пульсации по умолчанию, используя значение по умолчанию ?attr/colorControlHighlight (которое вы также можете установить в своей теме, если хотите).

Примечание: вам нужно создать настраиваемый селектор меньше, чем v21:

Предполагая, что у вас есть некоторые цвета, которые вы хотели бы использовать по умолчанию, нажатию и сфокусированному состоянию. Лично я сделал скриншот рябь на полпути, выбрав ее, и вытащил из нее основное / сфокусированное состояние.

-2

javascript html5 css3

задан md server 16 January 2019 в 12:41

2 ответа

Другие вопросы по тегам:

javascript html5 css3

Похожие вопросы:

score 0 · Answer 1

Обновлен код. Имейте в виду, что класс active добавляется один раз и будет в DOM, если вы не удалите его. поскольку вы используете onclick и передаете его внутрь, обработчик должен использовать переданный объект, подобный этому $(obj).addClass('active');

<!DOCTYPE html>
<html>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style type="text/css">
      .active{
      opacity: 0.7;
      }
   </style>
   <body>
      <h2 style="text-align:center">Lightbox</h2>
      <script type="text/javascript"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <div id="main_img">
         <img onclick='changeImage(this)' id="img" src="https://via.placeholder.com/150" style="width: 10%; height: 10%;" onchange="q()">
      </div>
      <div id="thumb_img">
         <img src="https://via.placeholder.com/150"  onclick='changeImage(this)' style="width: 10%; height: 10%;" id="first">
         <img src="https://via.placeholder.com/150"  onclick='changeImage(this)'style="width: 10%; height: 10%;" id="first">
         <img src="https://via.placeholder.com/150"  onclick='changeImage(this)'style="width: 10%; height: 10%;" id="first">
      </div>
      <script type="text/javascript">
         var sr
         function changeImage(obj){
           
           sr = $(obj).attr('src');
           /*alert(sr);*/
           $(obj).attr('src',sr);
            /*$('#img').removeClass('active');*/
           $(obj).addClass('active'); 
            $(obj).siblings().removeClass('active');
         }
         
      </script>
   </body>
</html>

score 0 · Answer 2

Это потому, что вы используете селектор идентификатора. Идентификатор может быть на странице только один раз, поэтому браузер берет первый элемент с идентификатором и игнорирует все остальные. Если вы хотите настроить таргетинг на несколько элементов, вам нужно добавить класс (а также селектор классов) следующим образом:

<img class="img-changed" [...] >
<img class="img-changed" [...] >

$(".img-changed").addClass("active");