堆栈内存溢出
  简体   繁体   English

img onHover和onClick导航效果

[英]img onHover & onClick effects for navigation

 原文  2016-01-16 05:40:58  6   3    javascript/ jquery/ html/ css/ image

问题描述

The website I'm working on: stipz.50webs.com 我正在使用的网站：stipz.50webs.com

ps HOME does nothing for now ps HOME现在什么都不做

Since I've nailed the onhover and onmouseout part what I want to add is the navigation effects for each div/img to let the end-user know which div is clicked / active 由于我已经钉上了onhover和onmouseout部分，因此我要添加的是每个div / img的导航效​​果，以使最终用户知道单击/激活了哪个div

When a certain div is active I want it to change the src and the onmouseout but that means I have to change the rest of the div/img back to their default ones using is it possible to have multiple declarations on multiple div id in a single function? 当某个div处于活动状态时，我希望它更改src和onmouseout，但这意味着我必须将div / img的其余部分改回其默认值，方法是可以在单个div上具有多个div id的多个声明功能？

I might figure out a code if there is a possibility for that to work 如果可能的话，我可能会找出一个代码

currently working on: 目前致力于： 

$('#orgn').click("mouseenter", function() {
$(this).attr('src', 'elements/mp_onhover/origin_on.png');
}).on("mouseleave", function() {
$(this).attr('src', "elements/mp_onhover/origin_off.png");
});

edit: I've tried working on this one again, I think it's really beyond me as a coder. 编辑：我已经尝试过再做一次，我认为作为编码人员真的超出了我。 I made a jsfiddle for it but it's not working properly jsfiddle link alternative link: http://stipz.50webs.com/div_navigation.html 我为此做了一个jsfiddle，但是它不能正常工作jsfiddle链接替代链接： http : //stipz.50webs.com/div_navigation.html

What I tried was add/remove class onClick for each div 我试过的是为每个div添加/删除类onClick 

$("#div-origin").click( function () { $(this).addClass("ori-active"); }, function () { $(this).removeClass("ori-active"); } );

3 个解决方案

解决方案1
 0  2016-01-16 06:03:49

I think this can be done with CSS only,see this fiddle 我认为这只能使用CSS来完成，请参阅此小提琴

basic css and we are game. 基本的CSS，我们就是游戏。 

.link:link{
  text-decoration:none;
  display:block;
  width:100px;
  height:100px;
  border:1px solid #666;
  background-color:red;
}

.link:hover{
  background-color:green; 
}
.link:visited{
  background-color:blue;
}

Now i changed color in that fiddle because i did not want to take pain in uploading picture to jsfiddle. 现在，我更改了该小提琴中的color ，因为我不想为将图片上传到jsfiddle中而费劲。 now you can change the background pic from there, no use of jquery 现在您可以从那里更改背景图片，无需使用jQuery

PS:- I see you have used img inside a , i think you can remove img and set background image of a PS： -我看你已经使用img里面a ，我想你可以删除img和设置背景图片a

解决方案2
 0  2016-01-16 10:44:37

I think this is what you expect.I only concerned about your two links.look at this code. 我认为这就是您的期望。我只关心您的两个链接。请看下面的代码。 

  <html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <style type="text/css"> ul li{ list-style-type: none; } ul li a{ text-decoration: none; font-size: 20px; display: block; color: black; } .classOne{ text-shadow:2px 2px 1px green; } </style> </head> <body> <ul> <li><a href="">HOME</a></li> <li><a href="">CHARACTERS</a></li> </ul> <!-- js--> <script type="text/javascript"> $(document).ready(function(){ $("ul li a").mouseenter(function(){ $(this).addClass("classOne"); }); $("ul li a").mouseleave(function(){ $(this).removeClass("classOne"); }); }); </script> </body> </html>

make changes as your needs. 根据您的需要进行更改。

解决方案3
 0 已采纳  2016-02-05 06:23:54

Long code but I've managed to achieve what I wanted for the navigation effect. 长代码，但我设法实现了导航效果所需的功能。

See updated live webpage: HERE 查看最新的实时网页： 此处 

 $(document).ready(function() { $('.do').hover( function() {$('.do').css('background-image', 'url(elements/mp_onhover/on_origin.png)');}, function() {$('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');}); $('.dp').hover( function() {$('.dp').css('background-image', 'url(elements/mp_onhover/on_profile.png)');}, function() {$('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)');}); $('.da').hover( function() {$('.da').css('background-image', 'url(elements/mp_onhover/on_affil.png)');}, function() {$('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)');}); $('.dc').hover( function() {$('.dc').css('background-image', 'url(elements/mp_onhover/on_combat.png)');}, function() {$('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');}); $('.do').click(function() { $('.do').css('background-image', 'url(elements/mp_onhover/ac_origin.png)'); $('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)'); $('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)'); $('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)'); $('.do').hover( function() {$('.do').css('background-image', 'url(elements/mp_onhover/ac_origin.png)');}, function() {$('.do').css('background-image', 'url(elements/mp_onhover/ac_origin.png)');}); $('.dp').hover( function() {$('.dp').css('background-image', 'url(elements/mp_onhover/on_profile.png)');}, function() {$('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)');}); $('.da').hover( function() {$('.da').css('background-image', 'url(elements/mp_onhover/on_affil.png)');}, function() {$('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)');}); $('.dc').hover( function() {$('.dc').css('background-image', 'url(elements/mp_onhover/on_combat.png)');}, function() {$('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');}); }); $('.dp').click(function() { $('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)'); $('.dp').css('background-image', 'url(elements/mp_onhover/ac_profile.png)'); $('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)'); $('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)'); $('.do').hover( function() {$('.do').css('background-image', 'url(elements/mp_onhover/on_origin.png)');}, function() {$('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');}); $('.dp').hover( function() {$('.dp').css('background-image', 'url(elements/mp_onhover/ac_profile.png)');}, function() {$('.dp').css('background-image', 'url(elements/mp_onhover/ac_profile.png)');}); $('.da').hover( function() {$('.da').css('background-image', 'url(elements/mp_onhover/on_affil.png)');}, function() {$('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)');}); $('.dc').hover( function() {$('.dc').css('background-image', 'url(elements/mp_onhover/on_combat.png)');}, function() {$('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');}); }); $('.da').click(function() { $('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)'); $('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)'); $('.da').css('background-image', 'url(elements/mp_onhover/ac_affil.png)'); $('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)'); $('.do').hover( function() {$('.do').css('background-image', 'url(elements/mp_onhover/on_origin.png)');}, function() {$('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');}); $('.dp').hover( function() {$('.dp').css('background-image', 'url(elements/mp_onhover/on_profile.png)');}, function() {$('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)');}); $('.da').hover( function() {$('.da').css('background-image', 'url(elements/mp_onhover/ac_affil.png)');}, function() {$('.da').css('background-image', 'url(elements/mp_onhover/ac_affil.png)');}); $('.dc').hover( function() {$('.dc').css('background-image', 'url(elements/mp_onhover/on_combat.png)');}, function() {$('.dc').css('background-image', 'url(elements/mp_onhover/nm_combat.png)');}); }); $('.dc').click(function() { $('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)'); $('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)'); $('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)'); $('.dc').css('background-image', 'url(elements/mp_onhover/ac_combat.png)'); $('.do').hover( function() {$('.do').css('background-image', 'url(elements/mp_onhover/on_origin.png)');}, function() {$('.do').css('background-image', 'url(elements/mp_onhover/nm_origin.png)');}); $('.dp').hover( function() {$('.dp').css('background-image', 'url(elements/mp_onhover/on_profile.png)');}, function() {$('.dp').css('background-image', 'url(elements/mp_onhover/nm_profile.png)');}); $('.da').hover( function() {$('.da').css('background-image', 'url(elements/mp_onhover/on_affil.png)');}, function() {$('.da').css('background-image', 'url(elements/mp_onhover/nm_affil.png)');}); $('.dc').hover( function() {$('.dc').css('background-image', 'url(elements/mp_onhover/ac_combat.png)');}, function() {$('.dc').css('background-image', 'url(elements/mp_onhover/ac_combat.png)');}); }); });

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 OnClick或OnHover事件监听javascript中的所有IMG - OnClick or OnHover Event Listen For All IMG in javascript 应用 onHover 和 onClick 样式 - Applying styles onHover and onClick 将悬停更改为onclick - Change onhover to onclick 试图从onclick更改为onhover - Trying to change from onclick to onhover 将JavaScript从onclick转换为onhover - convert javascript from onclick to onhover jquery onhover工作，onclick没有 - jquery onhover works, onclick does not 更改 onHover 和 onClick 事件的 CSS 样式 - Changing CSS styling onHover and onClick event Chrome扩展程序-更改弹出图标onClick / onHover - Chrome extension - changing the popup icon onClick / onHover jQuery-是否可以有单独的onHover和onClick事件？ - jQuery - Is it possible to have separate onHover and onClick events? 使用 React 为悬停和 onClick 上色表格行 - Coloring Table rows onHover and onClick using React
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM