Блог

Я использую комбинацию значков и текста для некоторых ссылок на боковой панели на моем веб-сайте, но я хочу, чтобы и значок, и текст менялись при наведении курсора мыши на любой из них. Используя MouseOn и ‘hover’ в моем CSS-файле, мне удалось заставить это работать, когда мышь наводится на значок, но если мышь только наводится на текст, изменяется только текст, но не значок. Кто-нибудь знает способ сделать это, пожалуйста? Ссылка на мой сайт и код, который я использую в настоящее время, приведены ниже. Спасибо всем.

http://www.retelevise.com

 <span class="social-media-sidebar-panel">
<a href="https://www.facebook.com/re.televise" target="_external window fa">
<img src="http://www.retelevise.com/wp-content/themes/myownzee/branding/
socialmedia-facebook-1.png"
onmouseover="this.src='http://www.retelevise.com/wp-content/themes/myownzee/
branding/socialmedia-facebook-2.png'"
onmouseout="this.src='http://www.retelevise.com/wp-content/themes/myownzee/
branding/socialmedia-facebook-1.png'"
class="social-media-sidebar-icons" title="Facebook" alt="Facebook">
<span style="font-size: 0.8em">Facebook</span></a></span>
  

попробуйте переместить события onmouseover и onmouseout в привязку и изменить ‘this.’ для ссылки на img по идентификатору.

Я внес несколько изменений в то, как вы это сделали:

• Переместил ваш стиль и javascript во внешние файлы
• Использовал jQuery для анимации (проще простого)

В этой версии теперь используется несколько изображений.

Демонстрация JSFiddle

HTML:

 <span class="sm">
   <a href="#" class="mediaLink">
        <img class="mediaPic" data-hover="http://placehold.it/60/4477ee/ffffff" src="http://placehold.it/60/224499/ffffff"/>
        <div class="mediaText"> Facebook</div>
    </a>
</span>
<span class="sm">
   <a href="#" class="mediaLink">
        <img class="mediaPic" data-hover="http://placehold.it/60/ee9933/ffffff" src="http://placehold.it/60/777777/ffffff"/>
        <div class="mediaText"> Stack Overflow</div>
    </a>
</span>
<span class="sm">
   <a href="#" class="mediaLink">
       <img class="mediaPic" data-hover="http://placehold.it/60/66aaff/ffffff" src="http://placehold.it/60/3388aa/ffffff"/>
        <div class="mediaText"> Twitter</div>
    </a>
</span>
<span class="sm">
   <a href="#" class="mediaLink">
        <img class="mediaPic" data-hover="http://placehold.it/60/dd1122/ffffff" src="http://placehold.it/60/991122/ffffff"/>
        <div class="mediaText"> YouTube</div>
    </a>
</span>
  

JavaScript (с использованием jQuery):

 $(document).ready( function() {
    $(".mediaLink").on( {
        mouseenter: function() {  
            $(this).children(".mediaPic").data("static", $(this).children(".mediaPic").attr("src"));
            $(this).children(".mediaText").css("color", "orange");
            $(this).children(".mediaPic").attr("src", $(this).children(".mediaPic").data("hover"));

        }, mouseleave: function() {

            $(this).children(".mediaText").css("color", "white");
            $(this).children(".mediaPic").attr("src", $(this).children(".mediaPic").data("static"));
        }
    });

});
  

CSS — код:

 .mediaLink {
    display: block;
}

.mediaPic {
    float: left;
    width, height: 60px;
}

.mediaText {
    height: 60px;
    width: 150px;
    padding-left: 10px;
    line-height: 60px;
    background: #242424;
    color: white;
    font-family: "Consolas"," Arial";
    font-size: 18px;
    float: left;
}

.sm {
    margin: 5px;
    float: left;
}
  

Объяснение:

Я <a> меняю его children ( .mediaPic и .mediaText ), когда он нависает над ним. Вкл mouseenter . — это когда курсор наведен на курсор мыши и mouseleave возвращает <a> его обратно в обычное состояние.

Вызываемая часть data-hover — это URL-адрес изображения, на которое вы хотите установить изображение, где вы оставляете src изображение, которое хотите использовать по умолчанию. При наведении курсора мыши на изображение скрипт «запомнит» оригинал src и вернет его обратно, когда вы покинете изображение ( mouseleave ).