Всем доброго дня и хорошего настроения!
Друзья, столкнулся с проблемкой, но решить самостоятельно ни как не могу...
Суть такая:
Хочу сделать что бы при наведении на лого (который изначально черный), он становился красным.
Пробовал в css добавить hover, но ни чего не сработало. Судя по результату, я что то сделал не так...
:)
Интуитивно, я догадываюсь, что решение есть. Подскажите, кто вкурсе как это сделать?
На всякий случай прикладываю код:
Код лого:
<?php
//-----------------------------------*/
// #logo
//-----------------------------------*/
$logo = Village::get_theme_mod( "site_logo", null );
$site_title = get_bloginfo( 'name' );
$site_subtitle = get_bloginfo( 'description' );
// If AJAX is disabled, make clicks on the logo go directly to home page with a skipped intro
$home_url = home_url('/');
if( ! Village::is_enabled('enable_pjax', true) ) {
$home_url .= '?skip-intro';
}
?>
<?php if ( $site_title && ! empty( $logo ) && ! empty( $logo['url'] ) ): ?>
<div id="logo" class="site-logo">
<a class="site-home-link" href="<?php echo esc_url( $home_url ); ?>">
<img width="<?php echo esc_attr( $logo['width'] ); ?>" height="<?php echo esc_attr( $logo['height'] ); ?>"
src="<?php echo esc_url_raw( $logo['url'] ); ?>" alt="<?php echo esc_attr( $site_title ) ?>"/>
</a>
</div>
<?php else: ?>
<div id="logo" class="site-logo site-logo--text">
<h1 class="site-title">
<a class="site-home-link" href="<?php echo esc_url( $home_url ); ?>">
<?php echo esc_html( $site_title ) ?>
</a>
</h1>
<h2 class="site-subtitle"><?php echo esc_html($site_subtitle)?></h2>
</div>
<?php endif; ?>
И css
.site-logo {
height: 100%;
overflow: hidden;
position: relative;
}
.site-logo--image {
-webkit-flex-basis: 150px;
-ms-flex-preferred-size: 150px;
flex-basis: 150px;
}
.site-logo--text {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.no-active-menu .site-logo--text {
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
.site-logo--text .site-title {
font-size: 1.33rem;
font-weight: 400;
letter-spacing: .3rem;
}
.site-logo--text .site-title a {
color: #363636;
}
.site-logo--text .site-subtitle {
font-size: .8rem;
font-weight: 300;
text-transform: none;
font-style: italic;
font-family: Merriweather;
color: #636363;
margin-top: .25rem;
}
.site-home-link {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: 100%;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width:1024px) {
.site-header__inner {
height: 100%}
#js-logo {
display: none;
}
.site-logo {
text-align: center;
}
}@media screen and (max-device-width:640px), (max-width:640px) {
.site-title {
font-size: 1rem;
}
Простой
