@mUchenik

Как добавить HOVER для лого?

Всем доброго дня и хорошего настроения!
Друзья, столкнулся с проблемкой, но решить самостоятельно ни как не могу...
Суть такая:
Хочу сделать что бы при наведении на лого (который изначально черный), он становился красным.
Пробовал в 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;
}
  • Вопрос задан
  • 336 просмотров
Пригласить эксперта
Ответы на вопрос 2
Mike_Ro
@Mike_Ro
$ run войтивайти
div#logo img:hover {
   color:red;
}


Если это текст, то все нормально будет, если это изображение, то изображение должно быть в svg формате.
Ответ написан
если лого обычная картинка и имеет к примеру 200х200 px и та на которую хотите заменить имеет теже размеры, то создайте в фотошопе холст 200 шириной и 400 высотой, поместите сверху лого, а под ним то, на которое хотите заменить. затем при наведении задайте margin-top:-200px; и лого будет меняться при наведении. блоку в котором будет лежать готовая картинка конечно же overflow:hidden;
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы