-1

我试图弄清楚如何将 PHP 文件中使用的这行 HTML（激活悬停弹出窗口）代码连接到以下 jquery 代码。我已经让它在单个悬停实例中工作，但我计划在整个页面上进行多次悬停。

HTML 代码：

<a class="que" href="http://www.google.com">okok</a> 
<div class="launch">test</div>

jQuery代码：

$(document).ready(function() {
    $("div.launch").css({'display':'block','opacity':'0'})
    $("a.que").hover(
        function () {
            $(this).next('.launch').animate({
                opacity: 1
            }, 500);
        },
        function () {
            $(this).sibling('div').stop().animate({
                opacity: 0
            }, 200);
        }
    )
});

非常感谢您的帮助... :)

4

2 回答 2

1

只需更改您的 jQuery 选择器以匹配您想要具有悬停效果的所有元素。jQuery 选择器是 jQuery 语句的一部分，它告诉您选择哪些项目。

$(selectorGoesHere).takeSomeAction;

选择器与您用于 CSS 的格式相同，因此，例如，class="someClass"在 jQuery 中，任何带有 的元素都将被选中$(".someClass")。jQuery 选择器可以同时引用多个匹配项，因此刚才使用的 jQuery 语句将选择具有该类的每个元素并执行您选择的任何操作。

例如，如果您想使用 jQuery 将 every 设置div为红色背景，您可以使用：

$("div").css("background-color","#FF0000");

分解后，该语句查找每个div元素（由选择器指定），然后将 CSS 样式应用于background-color: #FF0000文档div中的每个元素。

http://jsfiddle.net/joycse06/hzm5p/1/是使用您的代码具有多个悬停效果的示例。只需按照该链接获取示例如何将您已经编写的 jQuery 语句应用于多个 HTML 元素。

编辑：根据下面的代码，更改您的 jQuery 以匹配http://jsfiddle.net/hzm5p/5/

jQuery(document).ready(function() {
    jQuery("div.launch").css({'display':'block','opacity':'0'})

    jQuery("a.que").hover(
        function () {
            jQuery(this).parent().next('.launch').animate({
                opacity: 1
            }, 500);
        },
        function () {
            jQuery(this).parent().next('.launch').stop().animate({
                opacity: 0
            }, 200);
        }
    )
});​

只需添加.parent()以获取包含p元素，然后获取.next('.launch')元素。

编辑 2：对于 Wordpress 中的 jQuery，您需要在functions.php文件中的某处包含以下行：

wp_enqueue_script("jquery");

此外，Wordpress 使用的 jQuery 似乎是为“兼容模式”设计的，这意味着 $ 快捷方式默认情况下不可用。您需要使用jQuery代替 $，除非您使用http://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/中提到的一些解决方法

编辑 3：使用以下代码测试 jQuery 加载：

if (jQuery) {  
    alert("jQuery loaded"); 
} else {
    alert("jQuery not loaded");
}

如果它已加载，那么我不知道该告诉你什么。如果不是，您需要在 Wordpress 中找出原因并加载它，否则您需要重新编写代码以使用非 jQuery 脚本。

于 2012-05-19T15:32:33.970 回答
0

您可以将 classque用于所有<a>标签，并将class用于该标签旁边的launch所有s 。div<a>

于 2012-05-19T15:34:19.943 回答