У меня есть код jquery, который, похоже, не работает...
Когда я просматриваю изображение, я хочу, чтобы заголовок показывался, но это не так.
См. Демонстрацию http://jsfiddle.net/3Raar/4/
$(".social-popup-btn").hover(function(){
$(".social-name-popup").show();
}, function(){
$(".social-name-popup").hide();
})
Любая помощь будет замечательной!
Ваша разметка несколько недействительна. Попробуй это:
<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();
});
});
Элемент элемента списка HTML (
<li>
) используется для представления элемента списка. Он должен содержаться в упорядоченном списке (<ol>
), неупорядоченном списке (<ul>
) или в меню (<menu>
), где он представляет собой единый объект в этом списке.
Я бы предложил переписать html, чтобы сделать его действительным, однако, кажется, лучшим способом приблизиться к этому было бы просто использовать настраиваемый плагин подсказки. Я рекомендую использовать jQueryUI Tooltip. Тогда вам нужно будет изменить атрибут title
для каждого <a>
.
Вот как вы его реализуете:
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>
Надеюсь, что это поможет и сообщит мне, если у вас есть какие-либо вопросы.
$(this).siblings(".social-name-popup")
)