问题标签 [rollover]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
8 回答
4174 浏览

javascript - 进行图像翻转的最佳方法?

我希望我的主要标志在鼠标悬停时改变。

我知道有几种方法可以实现这一点,并且想知道稳定性、浏览器兼容性、效率和易于设置的最佳方法是什么。

我发现的一些方法是:

  • Javascript (jQuery) 替换“src”属性。
  • CSS 使用背景和“悬停”

还有吗?什么是最好的?

0 投票
1 回答
420 浏览

jquery - jquery菜单在悬停时动画出来,但是在元素之间移动时折叠...帮助

jquery 菜单被编程为在鼠标悬停时动画出来并在鼠标悬停时折叠。然而,当用户将鼠标悬停在项目上时,这是一个问题,因为当用户到达其中一个框的边缘时,它不再将其视为将鼠标悬停在整个菜单上。任何图像上都没有填充/边距或边框。这是一个 2 x 3 的正方形网格,所以所有的都很好地组合在一起。这是与每个列表元素相关的 jquery 代码。

$("li.menu3").mouseover(function(){

$("ul.inactive3").stop().animate({width: "500px", height: "150px"}, "fast", function(){ $("ul.inactive3").stop().动画({宽度:“500px”,高度:“300px”},“快”);

});

});

$("li.menu3").mouseout(function(){

$("ul.inactive3").stop().animate({width: "500px", height: "150px"}, "fast", function(){ $("ul.inactive3").stop().动画({宽度:“0px”,高度:“0px”},“快”);

});

我尝试通过简单地使用一个图像并将多个图像映射放在顶部来克服这个问题,但是这带来了鼠标悬停在 chrome 中不起作用的新问题。

任何帮助将不胜感激。,

谢谢,迈克

0 投票
1 回答
83 浏览

wordpress - bg块颜色翻转

嗨,我正在努力在 Wordpress 的菜单后面插入翻转背景颜色。我试图在这个网站http://alecsoth.com/photography/上实现类似这个黄色带的东西

这是我的菜单CSS(目前我可以得到灰色框并尝试了背景颜色a:悬停链接但似乎无法让它工作) -

宽度:80;边距:0 自动;}

宽度:10em;边距:-2.8em 0 0 0;向左飘浮; 显示:内联;位置:固定;宽度:170px;高度:100%;填充:-18.0em 4.3em 9.1em 5.5em;背景:#f5f5f5

宽度:80em;边距:1.7em 0 0 0;浮动:对;显示:内联;最小高度:30em;}

宽度:60em;保证金:0 2.5em 0 4.5em;向左飘浮; 显示:内联;}

0 投票
2 回答
3489 浏览

jquery - jQuery 下拉菜单

我已经能够制作一个 jQuery 下拉菜单,但是,当其中一个子链接翻转时,我无法让它保持展开状态。

代码:

0 投票
5 回答
1475 浏览

javascript - HTML 图像翻转 - 图像在翻转之前未完全加载?

我有一个图像(在左上角作为主页链接),我使用 CSS :hover 在翻转时更改图像。

问题是,图像在我第一次翻转时加载需要时间。有一个临时空白空间,您会看到图像逐渐加载。这需要大约一秒钟,但很烦人。

我该如何解决这个问题,使翻转是无缝的?有没有办法预加载图像?

0 投票
4 回答
1306 浏览

javascript - 使用 jQuery 创建按钮翻转

我正在尝试创建一个可以全局使用的函数来为图像创建翻转状态。基本上,我希望能够为图像添加一个类,然后当你翻转它时,jquery 将使用相同的图像名称和相同的扩展名,但在文件名中添加“-over”。(我将有一个翻转状态的图像,其名称与非翻转状态相同,只是上面带有 -over。我想出了这个,但它不起作用。我做错了什么还是有人知道更好的方法吗?

图片:

谢谢!

编辑:有没有办法让它不特定于文件时间,它可以找出任何文件类型而不仅仅是jpgs?

我正在使用:

它工作得很好

编辑2:我还可以添加一个活动状态(单击按钮时)吗?

0 投票
2 回答
1133 浏览

css - wordpress 中的 CSS 翻转标志

我正在尝试在 Wordpress 标题徽标上应用 CSS 图像翻转。我知道这对你们来说将是一个非常简单的解决方案,但我似乎无法在 Stackoverflow 的任何地方找到答案。我认为这可能与位置有关,但添加 :relative 或 :absolute 似乎没有区别?

下面是我的 CSS

&PHP

0 投票
3 回答
301 浏览

javascript - javascript翻转效果问题

我目前正在用一本 js 书学习 JS。一个翻转效果示例得到了我,所以我需要一些帮助。

我在 Flickr.com 上上传了一张快照。网址是:http ://www.flickr.com/photos/58745632@N05/5389380030/

快照的左侧是页面,快照的右侧是 javascript 代码。我的问题是我可以将红框中的内容更改为绿框中的代码吗?如果可以的话,作者为什么要添加“thisLink.imgToChange = thisImage”这一行?而“thisLink.imgToChange”和 “thisImage” 又是什么关系呢? 它们是相同的还是相同的?有人可以为我解释一下吗?非常感谢。

0 投票
1 回答
933 浏览

javascript - jQuery Quicksand + Captify(翻转脚本)

所以我的 jQuery Captify(图像翻转字幕)和 Quicksand(图像过滤系统)不能很好地协同工作时遇到了一点问题。当页面加载时,当我将鼠标悬停在图像上时,我的 Captify 运行良好,但是一旦我单击一个链接来过滤我的缩略图,captify 脚本就会停止工作。

我试图每隔 x 秒调用一次 captify 脚本,但我要么做得不正确,要么就是不正确的解决方案。谁能帮我吗?该网站可以在http://www.galaxyturbo.net/new/index.php找到

如果您有 Firebug 或类似 Google Chrome 中的开发人员工具,您可以从那里查看我的代码,我只是不想在此页面上发送垃圾邮件。如果您能在这里帮助我,请提前非常感谢,我真的很绝望。

0 投票
1 回答
315 浏览

javascript - 鼠标悬停图像隐藏下面的元素。怎么修?

这是我整理的一个示例,以更好地说明此问题:

http://www.saeidmohadjer.com/users/saeid/sandbox/javascript/image_map_rollover/test3/test3.html

当您从图像 A 区域转到图像 B 区域或反向时,有些位置不会显示翻转,因为下面的图像映射被翻转图像的透明区域覆盖。有没有办法让鼠标隐藏滚动图像?在 ActionScript 中,我可以通过将对象的 mouseEnable 属性设置为 false 以使其不碍事来做到这一点,但我不知道如何在 HTML/JavaScript 中做到这一点。

翻转图像(粉红色)是绝对定位的,在黑白图像上方具有更高的 z-index。实际用途是在鼠标滑过平面图时突出显示建筑物楼板上的平面图。

谢谢,

赛义德