Javascript jquery悬停并选择问题
以上链接, 当我选择下面的一个图标时。 这是对选定状态的更改,但问题是我需要限制悬停效果并进一步选择该图标。(因为我正在使用图像更改) 下面是我完整的jquery代码Javascript jquery悬停并选择问题,javascript,jquery,css,Javascript,Jquery,Css,以上链接, 当我选择下面的一个图标时。 这是对选定状态的更改,但问题是我需要限制悬停效果并进一步选择该图标。(因为我正在使用图像更改) 下面是我完整的jquery代码 $(document).ready(function(){ $('#animal_content_text_horse').css("display", "block"); $('#animal_pic_horse_span').css("display", "block"); $('#page_anima
$(document).ready(function(){
$('#animal_content_text_horse').css("display", "block");
$('#animal_pic_horse_span').css("display", "block");
$('#page_animal_img_horse').css("display", "block");
$('.animal_thumb_link').each(function() {
$(this).click(function(e) {
e.preventDefault();
default_set($(this).attr('id'));
$(".animal_thumb_link").removeClass("thumbselected");
$(this).addClass("thumbselected");
$(".animal_thumb_link").find('img').addClass("imgHoverable");
$(this).find('img').removeClass("imgHoverable");
});
});
// Change the image of hoverable images
$(".imgHoverable").hover( function() {
var hoverImg = HoverImgOf($(this).attr("src"));
$(this).attr("src", hoverImg).hide().fadeIn(0);
}, function() {
var normalImg = NormalImgOf($(this).attr("src"));
$(this).attr("src", normalImg).show();
}
);
function HoverImgOf(filename)
{
var re = new RegExp("(.+)\\.(gif|png|jpg)", "g");
return filename.replace(re, "$1_r.$2");
}
function NormalImgOf(filename)
{
var re = new RegExp("(.+)_r\\.(gif|png|jpg)", "g");
return filename.replace(re, "$1.$2");
}
});
function default_set(obj12){
var arr = ["horse_content", "camel_content", "peacock_content", "goat_content", "donkey_content", "rooster_content", "sheep_content", "alpacas_content", "cynthia_content", "rabbit_content", "cow_content"];
var arr2 = ["../images/horse_thumb.gif", "../images/camel_thumb.gif", "../images/peacock_thumb.gif", "../images/goat_thumb.gif", "../images/donkey_thumb.gif", "../images/rooster_thumb.gif", "../images/sheep_thumb.gif", "../images/alpacas_thumb.gif", "../images/cynthia_thumb.gif", "../images/rabbit_thumb.gif", "../images/cow_thumb.gif"];
for ( var i = 0; i <= arr.length; i++ ) {
if ( arr[ i ] === obj12 ) {
old_url = $("#" + obj12).children('img').attr('src');
new_url = old_url.replace(/thumb/,'thumb_r');
$("#" + obj12).children('img').attr('src',new_url);
}else{
$('#' +arr[ i ]).children('img').attr('src',arr2[ i ]);
}
}
}
function load_page(obj1,obj2,obj3){
/* detect current div if so hide */
current_pagepharadiv = document.getElementById("pagepharadiv_hidden").value;
current_pageheadertext = document.getElementById("pageheadertext_hidden").value;
current_pageimage = document.getElementById("pageimage_hidden").value;
$('#' + current_pagepharadiv).css("display", "none");
$('#' + current_pageheadertext).css("display", "none");
$('#' + current_pageimage).css("display", "none");
image_hover(obj1);
image_hover(obj2);
$('#' + obj3).fadeIn("fast");
//image_hover(obj3);
//$('#' + obj1).fadeIn("fast");
//$('#' + obj2).fadeIn("fast");
document.getElementById("pagepharadiv_hidden").value = obj1;
document.getElementById("pageheadertext_hidden").value = obj2;
document.getElementById("pageimage_hidden").value = obj3;
}
$(文档).ready(函数(){
$('#动物内容\文本\马').css(“显示”、“块”);
$('animal#pic_horse_span').css(“display”,“block”);
$('page_animal_img_horse').css(“显示”、“块”);
$('.animal\u thumb\u link')。每个(函数(){
$(此)。单击(函数(e){
e、 预防默认值();
默认设置($(this.attr('id'));
$(“.animal_thumb_link”).removeClass(“thumbselected”);
$(this.addClass(“thumbselected”);
$(“.animal\u thumb\u link”).find('img').addClass(“imgOverable”);
$(this.find('img').removeClass(“imgOverable”);
});
});
//更改可悬停图像的图像
$(“.imgOverable”).hover(函数(){
var hoverImg=HoverImgOf($(this.attr(“src”));
$(this.attr(“src”,hoverImg).hide().fadeIn(0);
},函数(){
var normalImg=NormalImgOf($(this).attr(“src”);
$(this.attr(“src”,normalImg).show();
}
);
函数HoverImgOf(文件名)
{
var re=new RegExp(“(.+)\”(gif | png | jpg)”,“g”);
返回文件名。替换(重“$1\r.$2”);
}
函数NormalImgOf(文件名)
{
var re=new RegExp(“(.+)_r\\(gif | png | jpg)”,“g”);
返回文件名。替换(重“$1.$2”);
}
});
功能默认设置(obj12){
var arr=[“马含量”、“骆驼含量”、“孔雀含量”、“山羊含量”、“驴含量”、“公鸡含量”、“绵羊含量”、“羊驼含量”、“辛西亚含量”、“兔子含量”、“奶牛含量”];
var arr2=[“./images/horse\u thumb.gif”、“./images/camel\u thumb.gif”、“./images/goat\u thumb.gif”、“./images/carry\u thumb.gif”、“./images/sheam\u thumb.gif”、“./images/羊驼\u thumb.gif”、“./images/cynthia\u thumb.gif”、“./images/rabbit/cow\u thumb.gif”];
对于(var i=0;i,在我看来,您真的让事情变得比需要的更复杂。下面是我将如何实现该页面:
- 底部正方形作为div,使图像透明
- 使用css:hover更改底部正方形的颜色
- 在服务器上为一个div中的每只动物生成全部顶级内容:因此,你有11个div,一个接一个,而不必在3个地方隐藏/显示内容。在下面的代码示例中,我假设它们有类
动物内容
- 将每个top div的id作为html5数据属性添加到相应的thumb链接中
这样,您在jQuery中需要做的就是:
$(".animal_thumb_link").click(function() {
var topId = $(this).data("topId");
$(".animal_thumb_link").removeClass("thumbselected");
$(this).addClass("thumbselected");
$(".animal-content").toggle(function() { return this.id === topId; });
});
还有,你到底为什么不使用css来做这些…代码简单易读就是简单的编辑我很抱歉,我没想到会有投票等等…选项。我的错。这不会再发生了。非常感谢你指出的。干杯!谢谢你的解决方案,我根据你的建议做了一些更改。它工作得很好现在,非常感谢。