JQuery 悬停提示

发布于 2024-08-19 02:39:29 字数 1295 浏览 7 评论 0原文

我正在尝试修改以下脚本以仅在“？”时显示/隐藏提示悬停在而不是整个“li”块上

HTML：

<ul class="tips">
<li>
    <a href="#" class="tooltip">?</a> Feature 1
    <div class="tip">
    <h4>Tip Title 1</h4>
    <h4>Tip Q</h4>
    <p>Tip A</p>
    </div>
</li>
<li>
    <a href="#" class="tooltip">?</a> Feature 2
    <div class="tip">
    <h4>Tip Title 2</h4>
    <h4>Tip Q</h4>
    <p>Tip A</p>
    </div>
</li>
<li>
    <a href="#" class="tooltip">?</a> Feature 3
    <div class="tip">
    <h4>Tip Title 3</h4>
    <h4>Tip Q</h4>
    <p>Tip A</p>
    </div>
</li>
</ul>

JQuery 脚本

$("ul.tips li").hover(function() {
    $(this).find("div").stop()
    .fadeIn()
    .css("display","block")

}, function() {
    $(this).find("div").stop()
    .fadeOut()
});

CSS：

.tips div  {
display: none;
position: absolute;
bottom: 0;
width: 100%;
height;auto;
background: #e00;
left:0;
}

我尝试像这样修改脚本，以便

$("ul.tips li a").hover(function() {

它以“a”标签为目标，但最终没有显示任何内容。

原文

I am trying to modify the following script to show/hide the Tip only when the "?" is hovered on and not the entire "li" Block

The HTML:

<ul class="tips">
<li>
    <a href="#" class="tooltip">?</a> Feature 1
    <div class="tip">
    <h4>Tip Title 1</h4>
    <h4>Tip Q</h4>
    <p>Tip A</p>
    </div>
</li>
<li>
    <a href="#" class="tooltip">?</a> Feature 2
    <div class="tip">
    <h4>Tip Title 2</h4>
    <h4>Tip Q</h4>
    <p>Tip A</p>
    </div>
</li>
<li>
    <a href="#" class="tooltip">?</a> Feature 3
    <div class="tip">
    <h4>Tip Title 3</h4>
    <h4>Tip Q</h4>
    <p>Tip A</p>
    </div>
</li>
</ul>

The JQuery script

$("ul.tips li").hover(function() {
    $(this).find("div").stop()
    .fadeIn()
    .css("display","block")

}, function() {
    $(this).find("div").stop()
    .fadeOut()
});

The CSS:

.tips div  {
display: none;
position: absolute;
bottom: 0;
width: 100%;
height;auto;
background: #e00;
left:0;
}

I have tried to modify the script like so

$("ul.tips li a").hover(function() {

so it targets the "a" tag but the it ends up not showing anything.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

过去的过去 2024-08-26 02:39:29

你需要结束你的js行：

$("ul.tips li a").hover(function() {
    $(this).siblings("div.tip").stop()
    .fadeIn()
    .css("display","block"); // <-- gotta put the semi-colon

}, function() {
    $(this).siblings("div.tip").stop()
    .fadeOut(); //<-- here too
});

You need to end your lines of js:

$("ul.tips li a").hover(function() {
    $(this).siblings("div.tip").stop()
    .fadeIn()
    .css("display","block"); // <-- gotta put the semi-colon

}, function() {
    $(this).siblings("div.tip").stop()
    .fadeOut(); //<-- here too
});

回复收藏 0 原文

耀眼的星火 2024-08-26 02:39:29

这看起来很不寻常，因为它似乎应该有效，但请尝试：

$(".tooltip").hover(function() { ... });

您还应该将 $(this).find("div")... 更改为 $(this).next ()...

That seems unusual as it seems like it should work, but try:

$(".tooltip").hover(function() { ... });

You should also change the $(this).find("div")... to $(this).next()...

回复收藏 0 原文

辞别 2024-08-26 02:39:29

您需要确保将事件处理程序包装在 jQuery 的文档就绪函数中：

$(document).ready(function () {
$("ul.tips li").hover(function() {
    $(this).find("div").stop()
    .fadeIn()
    .css("display","block")

}, function() {
    $(this).find("div").stop()
    .fadeOut()
});
});

除非 html 元素已经加载到 DOM 树中，否则您的悬停事件不会绑定到 html 元素。 $(document).ready() 延迟运行传递的匿名函数中包含的 JS，直到 html 文档的其余部分加载完毕且 DOM 树准备就绪。

You need to make sure that you wrap your event handler in the in jQuery's document ready function:

$(document).ready(function () {
$("ul.tips li").hover(function() {
    $(this).find("div").stop()
    .fadeIn()
    .css("display","block")

}, function() {
    $(this).find("div").stop()
    .fadeOut()
});
});

Your hover event won't bind to the html elements unless the html elements have been loaded into the DOM tree already. $(document).ready() delays running the JS included in the passed anonymous function until the rest of the html document is loaded and the DOM tree is ready.

More reading at: http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

回复收藏 0 原文

~没有更多了~