[英]jQuery: how can I control a div's opacity when hovering over another div?
I am currently working on my portfolio website which uses a very simple navigation. 我目前正在使用非常简单的导航来浏览我的投资组合网站。 However what I want to do is have the drop shadow beneath the type become stronger (read: higher opacity/ darker) when the type is being hovered on.
但是我想做的是,当鼠标悬停在类型下方时,使类型下方的阴影变得更强(阅读:更高的不透明度/更暗)。
Right now my code looks as follows and does not generate any errors but simply does not do anything either. 现在,我的代码如下所示,并且不会产生任何错误,但也不执行任何操作。
For a good understanding of what I mean please have a look at the website with a live example . 为了更好地理解我的意思,请看一个带有实际例子的网站 。
/* Work | Play | About | Contact */
/* Shadow Opacity */
$(document).ready(function() {
$('#workShadow', '#playShadow', '#aboutShadow', '#contactShadow').fadeTo( 0, 0.1);
});
/* Shadow Hover effect */
$(document).ready(function() {
$('a#work').hover(function() {
$('#workShadow').fadeTo( 200, 0.5);
}, function() {
$('#workShadow').fadeTo( 400, 0.1);
});
});
/* Type movement on hovering */
$(document).ready(function() {
$('a.shift').hover(function() { //mouse in
$(this).animate({ paddingTop: 85, paddingBottom: 2 }, 200);
}, function() { //mouse out
$(this).stop().animate({ paddingTop: 75, paddingBottom: 12 }, 400);
});
});
Basically I need the opacity of the shadow elements (4 individual ones) to start at 10% opacity and while the user hovers, the type moves down (this part is working) and simultaneously the shadow becomes stronger, increases to 60% opacity. 基本上,我需要阴影元素的不透明度(4个单独的元素)以10%的不透明度开始,并且当用户徘徊时,类型向下移动(此部分起作用),同时阴影变得更强,增加到60%的不透明度。 Then revert back to 10% when on mouseOut.
然后在mouseOut上恢复为10%。
This line is wrong - it is passing a bunch of arguments to the $()
function. 这行是错误的-它正在将一堆参数传递给
$()
函数。
$('#workShadow', '#playShadow', '#aboutShadow', '#contactShadow').fadeTo( 0, 0.1);
As the documentation notes, jQuery doesn't expect N arguments as a selector, but 1: 如文档所述 ,jQuery不希望N个参数作为选择器,而是1:
$('#workShadow, #playShadow, #aboutShadow, #contactShadow').fadeTo( 0, 0.1);
It is common (and good) practice to give a set of objects that should do something a common class or to select them in a smarter than just listing all their IDs. 通常的做法(也是一种好的做法)是提供一组应该执行某类通用操作的对象,或者以比列出所有ID更明智的方式选择它们。 Based on your current HTML, this selector gets all the shadow
<div>
s in the menu, and is much shorter - you won't have to modify your code if you add a new menu element later on, for example: 根据当前的HTML,此选择器将菜单中的所有阴影
<div>
都保存下来,并且更短-如果以后再添加新的菜单元素,则无需修改代码,例如:
$('div','#navigationFrame').fadeTo(0, 0.1);
I also see you have this: 我也看到你有这个:
<li id="work"><a id="work" ...>
This is really, really, wrong. 这是真的,真的,错误。 IDs should be unique in the document.
ID在文档中应该是唯一的。 By having more than 1 ID in the document not only are you breaking best practices, ID selection on jQuery will go crazy and won't work as expected.
通过在文档中包含多个ID,不仅会破坏最佳实践,而且在jQuery上选择ID会发疯,并且无法按预期工作。 Like the fadeTo selector, you can change the shadow changing code to a cleaner:
像fadeTo选择器一样,您可以将阴影更改代码更改为更清晰的代码:
$('a','#navigationFrame').hover(function() {
$(this).next('div').fadeTo(200, 0.5);
}, function() {
$(this).next('div').fadeTo(400, 0.1);
});
I tested the website with these changes and it works fine. 我通过这些更改对网站进行了测试,效果很好。
What the selectors in my examples are doing is taking advantage of jQuery's context . 我的示例中的选择器所做的就是利用jQuery的context 。 By doing this:
通过做这个:
$('a','#navigationFrame');
Or this: 或这个:
$('div','#navigationFrame');
We are telling jQuery "only give me the <a>
(or <div>
) elements inside #navigationFrame
. 我们告诉jQuery“只给我
#navigationFrame
的<a>
(或<div>
)元素。
It is equivalent to this: 等效于:
$('#navigationFrame').find('a');
It is a good idea to take advantage of this. 利用这个是一个好主意。 I see you have a tendency to manually list the elements you're trying to do stuff to do even if they are all similar in some way.
我看到您倾向于手动列出要尝试做的元素,即使它们在某种程度上都是相似的。 Try to shake this habit and let jQuery's powerful selectors get what you want from the document.
尝试摆脱这种习惯,让jQuery强大的选择器从文档中获得所需的内容。
I use this: 我用这个:
$(".thumbs img").addClass('unselected_img');
$('.thumbs img').click(function() {
$(this).addClass('selected_img');
if ($(this).is('selected_img')) {
$(this).removeClass('selected_img');
} else {
$('.thumbs img').removeClass('selected_img');
$(this).addClass('selected_img');
}
});
// hover the lists
$('.thumbs img').hover(
function() {
$(this).addClass('selected_img_h');
},
function() {
$(this).removeClass('selected_img_h');
});`
and style: 和风格:
.selected_img
{
opacity: 1; filter: alpha(opacity = 100);
border:none;
}
.selected_img_h{
opacity: 1; filter: alpha(opacity = 100);
border:none;
}
.unselected_img
{
opacity: 0.6; filter: alpha(opacity = 60);
border:none;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.