эффекты перехода css на фон И текст при зависании

Я пытаюсь сделать эффект перехода для работы как с текстом, так и с фоном при наведении курсора, но мой результат до сих пор является двумя отдельными эффектами. когда я наводил флажок, переход на bg работает нормально, но эффект текста происходит только тогда, когда я нахожу текст. Я хотел бы применить изменение цвета, когда путем зависания во всей коробке также не нужно навешивать текст. Мне нужно, чтобы цвет bG изменился с черного на белый, а название изменилось с белого на черный!эффекты перехода css на фон И текст при зависании

мой КСС

.stylish-popular-widget 
 
{ 
 
\t height: 150px; 
 
\t position: relative; 
 
\t width: 100%; 
 
\t 
 
} 
 
.stylish-popular-widget img 
 
{ 
 
\t height: 150px; 
 
\t max-width: 100%; 
 
} 
 
.stylish-popular-widget .meta-text 
 
{ 
 
\t background: rgba(0,0,0,.3); 
 
\t bottom: 0; 
 
\t top: 65%; /*adjust BG start position*/ 
 
\t left: 0; 
 
\t right: 0; 
 
\t position: absolute; 
 
\t text-align: left; 
 
\t padding-left: 10px; 
 
\t moz-transition: 1s; 
 
\t ms-transition: 1s; 
 
\t o-transition: 1s; 
 
\t transition: 1s; 
 
\t webkit-transition: 1s; 
 
} 
 
\t 
 
} 
 
.stylish-popular-widget .meta-text h3 
 
{ 
 
\t color: #FF0000 !important; 
 
\t 
 
} 
 
.stylish-popular-widget .meta-text h3 a 
 
{ 
 
\t color: #fff !important; 
 
\t font-size: 25px; 
 
\t letter-spacing: 1px; 
 
\t 
 
\t 
 
} 
 
.stylish-popular-widget .meta-text h3 a:hover 
 
{ 
 
\t text-decoration: none; 
 
\t color: #000 !important; 
 
\t 
 
} 
 

 
.stylish-popular-widget .meta-text h3 :hover 
 
{ 
 
\t text-decoration: none; 
 
\t color: #000 !important; 
 
\t 
 
} 
 
.stylish-popular-widget .meta-text span.date 
 
{ 
 
\t color: rgba(59,59,59,1); 
 
\t font-size: 11px; 
 
\t letter-spacing: 1px; 
 
\t padding-top: 30px; 
 
\t 
 
} 
 
.stylish-popular-widget:hover > .meta-text 
 
{ 
 
\t background: rgba(255,255,255,.8); \t \t 
 
\t top:inherit; 
 
    top: 0; 
 
\t \t 
 
}

\t \t \t \t <?php ?> 
 
\t \t \t \t 
 
\t \t \t \t <div class="stylish-popular-widget"> 
 
\t \t \t \t \t <a href="<?php echo get_permalink() ?>" rel="bookmark"><?php the_post_thumbnail('popular_posts_img'); ?> 
 
\t \t \t \t \t <div class="meta-text"> 
 
\t \t \t \t \t \t <h3><a href="<?php echo get_permalink() ?>"> 
 
\t \t \t \t \t \t TEST</h3> 
 
\t \t \t \t \t \t <span class="date">thstrhsthths</span></a> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </div> 
 
\t \t \t \t 
 
\t \t \t <?php 
 
\t \t

источник

2016-03-27 Costas Vitts

Будет проще, если вы представите онлайн-пример через jsfiddle или codepen. В любом случае вам нужно либо изменить «: hover» на элемент блока упаковки, а не на тэг anchor (a), или вы можете изменить привязку как элемент блока, добавив «display: block» к якорю , а затем вы можете дать размеры. – Narxx

Большое спасибо за ваш ответ! Я новичок в кодировании, и я сожалею обо всех моих вопросах и ошибках ... Можете ли вы привести пример с некоторым решением? –

Надеюсь, это поможет: https://jsfiddle.net/msyLj79n/ это всего лишь один пример, но есть много разных способов сделать это. – Narxx

Попробуйте это:

.stylish-popular-widget:hover .meta-text h3 a { 
    color: black!important; 
}

Live jsFiddle Demo

источник

2016-03-27 10:55:46 Pedram

HEYYYYYY его работа !!!! не могли бы вы объяснить мне, в чем проблема? Я новичок в кодировании, и мне потребовалась целая ночь, пытаясь найти, как это сделать! –

Ваше приветствие, у вас не возникло проблем. вы должны добавить это правило, но как оно работает? , вы должны использовать 'hover' на вашей обертке, что вы хотите навести эффект, что в вашем коде есть' .stylish-popular-widget: hover', а затем написать вашу цель, что в вашем коде '.meta-text h3 a', но вам нужно переопределить цвет, потому что это было раньше, тогда вы должны использовать 'important'. – Pedram

спасибо, человек очень благодарен :) –

} 
.stylish-popular-widget img 
{ 
    height: 150px; 
    max-width: 100%; 
} 
.stylish-popular-widget .meta-text 
{ 
    background: rgba(0,0,0,.3); 
    color:white; 
    bottom: 0; 
    top: 65%; /*adjust BG start position*/ 
    left: 0; 
    right: 0; 
    position: absolute; 
    text-align: left; 
    padding-left: 10px; 
    moz-transition: 1s; 
    ms-transition: 1s; 
    o-transition: 1s; 
    transition: 1s; 
    webkit-transition: 1s; 
} 

} 
.stylish-popular-widget .meta-text h3 
{ 

} 
.stylish-popular-widget .meta-text h3 a 
{ 
    color: inherit !important; 
    font-size: 25px; 
    letter-spacing: 1px; 


} 
.stylish-popular-widget .meta-text h3 a:hover 
{ 
    text-decoration: none; 
    color: inherit !important; 

} 

.stylish-popular-widget .meta-text :hover 
{ 
    text-decoration: none; 
    color:black; 

} 
.stylish-popular-widget .meta-text span.date 
{ 
    color: rgba(59,59,59,1); 
    font-size: 11px; 
    letter-spacing: 1px; 
    padding-top: 30px; 

} 
.stylish-popular-widget:hover > .meta-text 
{ 
    background: rgba(255,255,255,.8);  
    top:inherit; 
    top: 0; 

}

<div class="stylish-popular-widget"> 
        <a href="<?php echo get_permalink() ?>" rel="bookmark"><?php the_post_thumbnail('popular_posts_img'); ?> 
        <div class="meta-text"> 
         <h3><a href="<?php echo get_permalink() ?>"> 
         TEST</h3> 
         <span class="date">thstrhsthths</span></a> 
        </div> 
        </a> 
       </div>

Что-то вроде этого? Его метатекст, который управляет цветами вашего текста здесь.

источник

2016-03-27 10:37:33 SCJ

Вам не обязательно нужно несколько :hover -s, чтобы сделать это. Вы можете использовать наследование, в зависимости от вашего дизайна:

.stylish-popular-widget .meta-text { 
    background: rgba(0,0,0,.3); 
    bottom: 0; 
    top: 65%; /*adjust BG start position*/ 
    left: 0; 
    right: 0; 
    position: absolute; 
    text-align: left; 
    padding-left: 10px; 
    moz-transition: 1s; 
    ms-transition: 1s; 
    o-transition: 1s; 
    transition: 1s; 
    webkit-transition: 1s; 
    color: #fff; 
} 

.stylish-popular-widget .meta-text h3 a { 
    font-size: 25px; 
    letter-spacing: 1px; 
    color: inherit; 
} 


.stylish-popular-widget:hover > .meta-text { 
    background: rgba(255,255,255,.8);  
    top: 0; 
    color: black; 
}

И вы, вероятно, не нужны все эти !important декларации.

источник

2016-03-27 11:36:21

эффекты перехода css на фон И текст при зависании

ответ

Смежные вопросы