Сделать h2 внутри div также изменить цвет, как и остальные

ProgramBox

Сделать h2 внутри div также изменить цвет, как и остальные

Post author:admin
Запись опубликована:7 февраля, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Я пытаюсь изменить цвет h2 тега внутри a div . Другие элементы внутри этого div изменяются на белый цвет при наведении курсора мыши, только h2 цвет не меняется. Я знаю, что могу изменить это в CSS … .well.sb:hover, .well.sb:hover h2 , но плохо в том, что h2 часть меняет цвет отдельно от остальных. При наведении курсора мыши на все это, все (включая h2) должно изменить цвет текста на белый одновременно и с одинаковой скоростью и для одного и того же большого и единственного раздела div. Как заставить это работать?

 h2.title-article-sidebar {
    font-size: 14px;
    font-family: Calibri;
    color: #444;
    font-weight: 700;
    line-height: 1.25em;
    margin-top: 0;
}

.article-image-summary-sidebar {
    border: 0 solid;
    padding-bottom: 0;
    -moz-transition: .9s ease;
    -webkit-transition: .9s ease;
    -o-transition: .9s ease;
    -ms-transition: .9s ease;
    transition: .9s ease;
}

.well.sb:hover {
        color: #FFF;
        background-color: #A10000;
        text-decoration: none;
        -moz-transition: .6s ease-in-out;
        -webkit-transition: .6s ease-in-out;
        -o-transition: .6s ease-in-out;
        -ms-transition: .6s ease-in-out;
        transition: .6s ease-in-out;
    }

  <div class="well sb"><div>
      
        <div class="article-image-summary-sidebar">
            <img alt="X" src="http://loremxpixel.com/200/200">
            <div class="article-date-summary-sidebar">
                20-November-2010
                
            </div>
            <div class="article-tag-summary-sidebar">
                TAG
            </div>
            <h2 class="title-article-sidebar">
               TITLE WITH H2 TAG!!!!
            </h2>
        </div>
    </div></div>

Ответ №1:

Происходит 2 вещи. Во-первых, вам нужно более конкретно настроить таргетинг на h2 (он переопределяет ваши стили наведения). Во-вторых, у вас конфликтующие переходы.

 h2.title-article-sidebar {
    font-size: 14px;
    font-family: Calibri;
    color: #444;
    font-weight: 700;
    line-height: 1.25em;
    margin-top: 0;
}

.article-image-summary-sidebar {
    border: 0 solid;
    padding-bottom: 0;
    /* -moz-transition: .9s ease;
    -webkit-transition: .9s ease;
    -o-transition: .9s ease;
    -ms-transition: .9s ease;
    transition: .9s ease; */
}

.well.sb:hover {
    color: #FFF;
    background-color: #A10000;
    text-decoration: none;
    -moz-transition: .6s ease-in-out;
    -webkit-transition: .6s ease-in-out;
    -o-transition: .6s ease-in-out;
    -ms-transition: .6s ease-in-out;
    transition: .6s ease-in-out;
}
.well.sb:hover h2.title-article-sidebar {
    color: #FFF;
    -moz-transition: .6s ease-in-out;
    -webkit-transition: .6s ease-in-out;
    -o-transition: .6s ease-in-out;
    -ms-transition: .6s ease-in-out;
    transition: .6s ease-in-out;
}

 <div class="well sb"><div>
      
    <div class="article-image-summary-sidebar">
        <img alt="X" src="http://loremxpixel.com/200/200">
        <div class="article-date-summary-sidebar">
            20-November-2010
            
        </div>
        <div class="article-tag-summary-sidebar">
            TAG
        </div>
        <h2 class="title-article-sidebar">
           TITLE WITH H2 TAG!!!!
        </h2>
    </div>

</div></div>

Ответ №2:

Просто удалите color: #444; из h2.title-article-sidebar

Ответ №3:

Последние версии Chrome, как правило, добавляют переходы во вложенные элементы (не уверен, что это ошибка или особенность).

Просто убедитесь, что дочерние элементы не имеют унаследованного перехода

 h2.title-article-sidebar {
  font-size: 14px;
  font-family: Calibri;
  color: #444;
  font-weight: 700;
  line-height: 1.25em;
  margin-top: 0;
}
.article-image-summary-sidebar {
  border: 0 solid;
  padding-bottom: 0;
  -moz-transition: .9s ease;
  -webkit-transition: .9s ease;
  -o-transition: .9s ease;
  -ms-transition: .9s ease;
  transition: .9s ease;
}
.well.sb:hover {
  color: #FFF;
  background-color: #A10000;
  text-decoration: none;
  -moz-transition: .6s ease-in-out;
  -webkit-transition: .6s ease-in-out;
  -o-transition: .6s ease-in-out;
  -ms-transition: .6s ease-in-out;
  transition: .6s ease-in-out;
}
.sb * {
  transition: 0s;
}

 <div class="well sb">
  <div>

    <div class="article-image-summary-sidebar">
      <img alt="X" src="http://loremxpixel.com/200/200">
      <div class="article-date-summary-sidebar">
        20-November-2010

      </div>
      <div class="article-tag-summary-sidebar">
        TAG
      </div>
      <h2 class="title-article-sidebar">
               TITLE WITH H2 TAG!!!!
            </h2>
    </div>
  </div>
</div>

Ответ №4:

Это решит проблему:

 h2.title-article-sidebar {
    font-size: 14px;
    font-family: Calibri;
    /* color: #444;*/
    font-weight: 700;
    line-height: 1.25em;
    margin-top: 0;
}

.article-image-summary-sidebar {
    border: 0 solid;
    padding-bottom: 0;
}

.well.sb:hover {
        color: #FFF;
        background-color: #A10000;
        text-decoration: none;
        -moz-transition: .6s ease-in-out;
        -webkit-transition: .6s ease-in-out;
        -o-transition: .6s ease-in-out;
        -ms-transition: .6s ease-in-out;
        transition: .6s ease-in-out;
    }

 <div class="well sb"><div>
      
        <div class="article-image-summary-sidebar">
            <img alt="X" src="http://loremxpixel.com/200/200">
            <div class="article-date-summary-sidebar">
                20-November-2010
                
            </div>
            <div class="article-tag-summary-sidebar">
                TAG
            </div>
            <h2 class="title-article-sidebar">
               TITLE WITH H2 TAG!!!!
            </h2>
        </div>
    </div></div>

1. Я не думаю, что пользователь ищет это, поскольку он четко упомянул об изменении цвета. @Andre

2. Я не думаю, что он тоже этого хочет. Он уже отклонил один ответ, предполагающий то, что вы здесь объясняете. #444 Я не думаю, что пользователь ищет комментарии. @Andre

3. Я думаю, это лучший вариант. Я удалил анимацию из .article-image-summary-sidebar класса. и теперь анимация в порядке.

4. Вы, должно быть, шутите правильно. Добавьте это #444 обратно в код и посмотрите, как ваша работа завершается неудачей. @Andre

5. Я сосредоточился на переходе и забыл добавить цвет обратно: D В любом случае, @mhatch уже ответил правильно.

Ответ №5:

У вас нет никаких проблем с вашей анимацией, как упоминалось в некоторых других ответах. Вы правильно написали свой код, и нет никаких specificity проблем.

Я прикрепляю ссылку codepen, по которой я пытался решить вашу проблему: http://codepen.io/Sky-123/pen/mALGQZ

Анимации остаются неизменными, как вы их написали. Единственное изменение, которое я сделал, это добавил color:#444 h2 тег to через встроенную инструкцию, а затем удалил его в hover in jQuery , поскольку это вызывало проблемы в анимации..

Надеюсь, это решит вашу проблему.