Состояние Jquery Hover не отображается при наведении курсора

Question

Состояние Jquery Hover не отображается при наведении курсора

0

У меня есть код jquery, который, похоже, не работает...

Когда я просматриваю изображение, я хочу, чтобы заголовок показывался, но это не так.

См. Демонстрацию http://jsfiddle.net/3Raar/4/

$(".social-popup-btn").hover(function(){
        $(".social-name-popup").show();
    }, function(){
        $(".social-name-popup").hide();
    })

Любая помощь будет замечательной!

Paul O'Brien 18 сен. 2013, в 18:16

Источник

Теги:

jquery

html

hover

2 ответа

Ещё вопросы

Andre Calil · Answer 1 · 2013-09-18T15-16-00.000Z

Ваша разметка несколько недействительна. Попробуй это:

<ul class="social-signin-livfeed">
    <li>
        <a href="#" class="facebook-tab-signin social-popup-btn">Facebook</a>
        <p class="social-name-popup">Facebook</p>
    </li>
    <li>
        <a href="#" class="twitter-tab-signin social-popup-btn">Twitter</a>
        <p class="social-name-popup">Twitter</p>
    </li>
    <li>
        <a href="#" class="instagram-tab-signin social-popup-btn">Instagram</a>
        <p class="social-name-popup">Instagram</p>
    </li>
    <li>
        <a href="#" class="google-tab-signin social-popup-btn">G+</a>
        <p class="social-name-popup">Tumbler</p>
    </li>
    <li>
        <a href="#" class="pinterest-tab-signin social-popup-btn">pinterest</a>
        <p class="social-name-popup">Pinterest</p>
    </li>
    <li>
        <a href="#" class="youtube-tab-signin social-popup-btn">Youtube</a>
        <p class="social-name-popup">Youtube</p>
    </li>
    <li class="last">
        <a href="#" class="chartego-tab-signin social-popup-btn">Chartego</a>
        <p class="social-name-popup">Chartego</p>
    </li>
</ul>

А также:

$(function(){
    $(".social-name-popup").hide();

    $(".social-popup-btn").hover(function(){
        $(this).siblings(".social-name-popup").show();
    }, function(){
        $(this).siblings(".social-name-popup").hide();
    });
});

Эй, спасибо большое, разметка намного лучше :) Можете ли вы показать мне, как вы будете делать jquery для каждого ролловера ???
@ PaulO'Brien Добро пожаловать. Извините, я не понимаю ваш вопрос. Теперь он работает, используя элемент рядом с кнопкой, который имеет класс social-name-popup ( $(this).siblings(".social-name-popup") )

Dom · Answer 2 · 2013-09-18T14-37-00.000Z

Элемент элемента списка HTML (<li>) используется для представления элемента списка. Он должен содержаться в упорядоченном списке (<ol>), неупорядоченном списке (<ul>) или в меню (<menu>), где он представляет собой единый объект в этом списке.

- Сеть разработчиков Mozilla

Я бы предложил переписать html, чтобы сделать его действительным, однако, кажется, лучшим способом приблизиться к этому было бы просто использовать настраиваемый плагин подсказки. Я рекомендую использовать jQueryUI Tooltip. Тогда вам нужно будет изменить атрибут title для каждого <a>.

Вот как вы его реализуете:

DEMO

JAVASCRIPT:

$(function(){
    $(document).tooltip();
});

HTML:

<ul class="social-signin-livfeed">
    <li> 
        <a href="#" class="facebook-tab-signin social-popup-btn" title="Facebook">Facebook</a>
    </li>
    <li> 
         <a href="#" class="twitter-tab-signin social-popup-btn" title="Twitter">Twitter</a>
    </li>
    <li> 
         <a href="#" class="instagram-tab-signin social-popup-btn" title="Instagram">Instagram</a>
    </li>
    <li> 
         <a href="#" class="google-tab-signin social-popup-btn" title="G+">G+</a>
    </li>
    <li> 
         <a href="#" class="pinterest-tab-signin social-popup-btn" title="pininterest">pinterest</a>
    </li>
    <li> 
         <a href="#" class="youtube-tab-signin social-popup-btn" title="Youtube">Youtube</a>
    </li>
    <li class="last">
         <a href="#" class="chartego-tab-signin social-popup-btn" title="Chartego">Chartego</a>
    </li>
</ul>

Надеюсь, что это поможет и сообщит мне, если у вас есть какие-либо вопросы.

Привет, большое спасибо за вашу помощь. Мой JQuery находится во внешнем документе. Можете ли вы показать мне, как бы вы назвали каждый класс, так что это специфично для этого HTML ???