标签: jquery-hover

我有一个用PHP构建的导航菜单,使当前位置具有不同的图像,以便用户知道它们的位置.

在函数中,我输出了以下HTML属性:

设置td id:

$menu_output .= '<tr><td id="nav_buttons">';

并设置img id和用户定义img data-id:

$menu_output .= '" id="alt" data-id="yes';

该功能也有这个位:

...
if ($current_page == $key) {
    $menu_output .= $image_dir . $ds . $page_nav_alt[$key];
    $menu_output .= '" id="alt" data-id="yes';
}

else {
    $menu_output .= $image_dir . $ds . $page_nav[$key];
}

$menu_output .= '" border="0" height="19" width="129"></a></td>';

将当前页面设置为yes以标记它.

我基本上给它两个链接和图像阵列,当前页面有一个突出显示的图像.这个菜单似乎工作正常,我已经使用了一段时间.

最近我想改变它,以便除了这个功能,我还可以使用jQuery悬停在效果上.我的想法是它有多难？嗯,这比我想象的要困难得多.我绝不是JavaScript或jQuery的专家,所以我并不惊讶我搞砸了.

这是我正在使用的jQuery没有给出预期的结果:

$(document).ready(function() {

    var test = $('#alt').attr('data-id');

    if (test != 'yes'){
        $('#nav_buttons img').hover(function() {
            this.src = this.src.replace('_dark', '_light');
        }, …

我在html中有一个输入字段,在字段旁边有一个帮助图标(？),当我将鼠标悬停在图标上时,我希望显示一条简单的文本消息,并且文本消息应该在悬停时消失.用jquery做任何方法吗？

图标将是一个简单的图像说一个小问号.文字将是"在框中输入你的名字"

这是我的jsfiddle - http://jsfiddle.net/ganganp/x62wR/5/

     $('#rotator0 div').hover(
     function () {
            ssrc = $(this).find('img').attr("src");
            valt = $(this).find('img').attr("alt");
            (this).children('img').attr('src','http://placehold.it/150x150&text='+valt);
     }, 
     function () {
           $(this).children('img').attr('src',ssrc);
     }
 );

将鼠标悬停在内圈图像不起作用.我哪里出错了？

我上周刚开始使用jQuery编写代码,需要一些帮助来确定如何使菜单正常工作.我有3个标签,每个标签都有自己的菜单.显示页面时,会自动显示菜单和子菜单.一旦显示,用户可以将鼠标悬停在选项卡上以查看其他子菜单,当它们停止悬停时,将显示原始子菜单.

我的问题是虽然,我可以向他们展示其他标签的子菜单,我不能保持子菜单打开,以便用户点击子菜单项.其他教程展示了如何仅在子菜单嵌套在父元素中时才这样做,但我的菜单结构代码没有嵌套子菜单(这是我加入项目时代码的方式).如果用户在相应的选项卡上悬停,是否有某些方法可以保持子菜单打开？

这是我的菜单HTML:

    <div id="navigation">
        <div id="main-nav">
            <div id="kids"><a href="../images/nav1.png"></a></div>
            <div id="community"><a href="../images/nav2.png"></a></div>
            <div id="about"><a href="../images/nav3.png"></a></div>
        </div>
    </div>

    <div id="sub-nav"> 
        <ul class="menu-1 requiresJS">
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
            <li><a href="#">Item3</a></li>
            <li><a href="#">Item4</a></li>
            <li><a href="#">Item5</a></li>
            <li><a href="#">Item6</a></li>
        </ul>
        <ul class="menu-2 requiresJS">
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
            <li><a href="#">Item3</a></li>
            <li><a href="#">Item4</a></li>
            <li><a href="#">Item5</a></li>
            <li><a href="#">Item6</a></li>
        </ul>
        <ul class="menu-3 requiresJS">
            <li><a href="#">Item1</a></li>
            <li><a href="#">Item2</a></li>
            <li><a href="#">Item3</a></li>
            <li><a href="#">Item4</a></li>
            <li><a href="#">Item5</a></li>
            <li><a href="#">Item6</a></li>
        </ul>

这是我的jQuery到目前为止:

// For JS users, display sub menus by default
$(".requiresJS").css("display","block");

var …

我有一个行表(duh),在其中一列中,我试图在悬停/鼠标悬停期间出现两个按钮.现在,它是一个带有设置宽度/高度和背景位置的锚标签.

这是他们在不隐藏时的样子:

成品的一个很好的例子是groovehark的悬停控件:

基本上我想知道如何将所有图像隐藏起来,除了当前正在徘徊的行中的图像.然后该行将显示这些图像,但一旦鼠标移动到另一行就会消失.

Html代码:

echo '<td><a href="/servers/detail.php?id='. $row['id'] .'">'.$row['server_name'].'</a><a id="option-favorite" class="rowOption"></a><a id="option-vote" class="rowOption"></a></td>';

JS代码:

jQuery('td').live('mouseover', function () {
    jQuery(this).closest("tr").find('a.rowOption').visible();
});

我有一个页面,它将有一系列"tile"div,每个div都有一个或多个子div.

我想,当滚动父div时,将它的类和所有div更改为悬停状态.

我可以很容易地让父div工作,但不能得到孩子:见小提琴

$('.tile').hover(
            function () {
                $(this).addClass("hover");
                $(this).find('.inner').addClass("hover");
              },
              function () {
                $(this).removeClass("hover");
                $(this).find('.inner').removeClass("hover");
              }
        )

我使用"find"看到的所有示例都使用了NAMED父级; 但我只需要使用当前父母正在徘徊的孩子($ this).

编辑/ UPDATE:

我的部分问题是在div内部有一个图像按钮.该按钮应该具有OWN翻转功能.请参阅以下设计师的图片.我可以得到第一个组合 - 一切青色和白色加按钮......但是使用CSS我不能影响lus按钮的PARENTS,可以吗？

在我的网站上,这些框应该淡入描述中.这适用于我尝试过的每个浏览器,除了IE10.这是一个WordPress网站,我使用九个插件.我已经尝试停用所有插件但徘徊仍然无法在IE10中运行.

下面是我用于悬停的代码:

jQuery(document).ready(function($){

$('.thumbnail').hover(function() {
  $('img', this).stop(true,true).fadeTo(100, 0.1);
  $('.description', this).stop(true,true).fadeIn(100);
}, function() {
  $('img', this).stop(true,true).fadeTo(100, 1);
  $('.description', this).stop(true,true).fadeOut(100);
});

});

有人可以帮我识别问题吗？如果我遗漏了任何重要信息,请告诉我.谢谢.

编辑:过滤/悬停的整个代码.

  // Filter
  $(function() {

    var time_effect = 1000;
    var effect_name = 'easeOutQuart';

    $('.all').quicksand( $('.everything article'), {
        duration: time_effect,
        attribute: 'data-id',
        easing: effect_name,
        adjustHeight: 'auto',
        useScaling: false
      }, function() { // callback function
            $("a.single-image").fancybox({
                'transitionIn'   : 'elastic',
                'transitionOut'  : 'fade',
                'overlayColor'   : '#000',
                'overlayOpacity' : '0.6'
            });
            $(document.body)
                .on('mouseenter', '.thumbnail', function() {
                    $('img', this).stop(true,true).fadeTo(600, 0);
                    $('.description', this).stop(true,true).fadeIn(600);
                })
                .on('mouseleave', …

我在使用:not()选择器/排除器时遇到问题.我正在做的是为打开的手风琴面板添加一个'.Activated'类(带有class'.panel').然后当使用'.panel'类悬停所有元素时,我想运行一个函数.但是,有时会有两个类'class ="panel Activated''的元素,我不想运行该函数.

这里还有一些我的相关代码:

function onOpenPanel(obj){
        var slideR = obj.index + 1;
        $('.panel:nth-child(' + slideR + ')').addClass('Activated');
    } 

$('.panel:not(.Activated)').hover(function(){
        $(this).css('background-position','0px top');
    },function(){
        $(this).css('background-position','-41px top');
    });

您会在网站上注意到,在打开的手风琴面板上,背景跳跃了41px,因为我的:not()选择器没有发现该面板也有'.Activated'类,因此不应受到.hover功能.

HTML:

<div class="accordion">

    <!-- First slide -->

    <div>
        <img src="img/img-1.jpg" width="10" />

        <div class="caption">
        <p class="mask-1"></p>
            <p class="title sl1">
                Professional Products & Solutions
            </p>
            <p class="body one">As a global leader across many sectors, Sony Professional combine world class knowledge with groundbreaking technology – inspiring businesses to amaze their customers.<br />
            </p>

        </div>

    </div>

    <!-- …

我正在创建一个简单的库存应用程序,目前有一个列出库存中所有商品的表格.当用户将鼠标悬停在每个项目的描述上时,我想要显示每个项目的图像,但是列表中可能有许多不同的项目,每个项目都有自己的图片.我正在使用下面的项目测试一些代码,但它无法正常工作,因为只有两个项目的图像显示.

如何为列表中的每个项目显示不同的图像？

HTML

 <li>
<a href="#">Get Well</a>
<div class="place-image"><img src="../img/Get%20Well.jpg"></div>
</li>

<li>
<a href="#">I Love You</a>
<div class="place-image"><img src="../img/I%20Love%20You.jpg"></div>
</li> 

使用Javascript

$('a').hover(
function() {
    $('.place-image').fadeIn('slow');
},function() {
    $('.place-image').fadeOut('slow');
}
);

所以我正在创建一个关于用户提交的食谱的页面.有些用户提交了关于食谱的简短引用,有些则没有.我希望在用户将鼠标悬停在配方图像上时显示引用(如果存在).

现在,我正在使用这个:

$(".recipe").hover(function(){
            $(".slider-submit").hide();
            $(".slider-description").show();
        },
        function(){
            $(".slider-submit").show();
            $(".slider-description").hide();
        });

第一个问题是它会改变所有食谱,而不仅仅是那些悬停在其上的食谱.第二个问题是,我不确定如何检查该配方是否存在"滑块描述".

这是我正在努力的一个小提琴.我还在学习JQuery,请给我任何提示!