[英]Hover over text jQuery
I'm running into a problem, and I'm not quite sure how to solve it. 我遇到了一个问题,我不太清楚如何解决它。
Currently, when one hovers over this particular picture, the opacity drops down (revealing a background color) and type appears. 目前,当一个悬停在这个特定的图片上时,不透明度下降(显示背景颜色)并且出现类型。 The problem, is that I want it to continue to act as if it is hovered over, even when they hover over the type. 问题是,我希望它继续表现得像是在它上面盘旋,即使它们悬停在类型上。
Should I try changing the z-index? 我应该尝试更改z-index吗? For some reason that didn't work... 出于某些原因,这些都不起作用......
JSFIDDLE http://jsfiddle.net/4jrUp/ JSFIDDLE http://jsfiddle.net/4jrUp/
HTML HTML
<a class="bg" href="">
<h1 class="first_title">FrameMonkey</h1>
<img class="portfolio-item" src="http://blog.gettyimages.com/wp-content/uploads/2013/01/Siberian-Tiger-Running-Through-Snow-Tom-Brakefield-Getty-Images-200353826-001.jpg">
<h3 class="first_description">A project that I've been working on since June - check back soon to see it in my portfolio!</h3>
</a>
CSS CSS
.portfolio-item:hover {
overflow: hidden;
z-index: 1;
opacity:0.1;
}
.portfolio-item, .bg {
height: 200px;
width: 200px;
left: 0px;
border-radius:25px;
position:absolute;
}
.bg {
background-color: rgba(48, 48, 48, 0.9);
top: 100px;
display:inline-block;
}
.first_title {
position: absolute;
z-index: 100;
color:white;
left: 10px;
font-size: 15pt;
opacity: 0;
}
.first_description {
top: 50px;
position: absolute;
z-index: 100;
color:white;
left: 10px;
font-size: 12pt;
opacity: 0;
}
Javascript 使用Javascript
$(".portfolio-item").hover(function () {
$(".first_description").css("opacity", "1");
$(".first_title").css("opacity", "1");
}, function () {
$(".first_description").css("opacity", "0");
$(".first_title").css("opacity", "0");
});
Thanks! 谢谢!
You actually don't need jQuery for this. 实际上,你并不需要jQuery的这一点。
UPDATED EXAMPLE HERE - ( I added an optional transition in there too.. ) 这里有更新的例子 - (我在那里添加了一个可选的过渡...)
Make the parent element, .bg
, block
level, and set the border-radius
and dimensions on it. 创建父元素, .bg
, block
级别,并在其上设置border-radius
和dimensions。 The important part is that it's relatively positioned so that the children elements are absolutely positioned, relative to the parent. 重要的是它相对定位,以便子元素相对于父元素绝对定位。
.bg {
background-color: rgba(48, 48, 48, 0.9);
position:relative;
height:200px;
width:200px;
display:block;
border-radius:25px;
overflow:hidden;
}
The :hover
part is quite simple actually, all you do is change the opacity
. :hover
部分实际上很简单,你要做的就是改变opacity
。
.bg:hover .first_title, .bg:hover .first_description {
opacity:1;
}
.bg:hover .portfolio-item {
opacity:.1;
}
And the rest of the CSS: 其余的CSS:
.portfolio-item {
height: 200px;
width: 200px;
position: absolute;
}
.first_title, .first_description {
position: absolute;
color: white;
padding: 10px;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
z-index: 1;
opacity: 0;
}
.first_title {
font-size: 15pt;
}
.first_description {
top: 50px;
font-size: 12pt;
}
Try adding the hover event to the .bg instead of .portfolio item, that way you can remove the z-index. 尝试将悬停事件添加到.bg而不是.portfolio项目,这样就可以删除z-index。
The jQuery change jQuery改变了
$(".bg").hover(function () {
$(this).children(".first_description").css("opacity", "1");
$(this).children(".first_title").css("opacity", "1");
}, function () {
$(this).children(".first_description").css("opacity", "0");
$(this).children(".first_title").css("opacity", "0");
});
And the CSS change 而CSS改变了
.first_title {
position: absolute;
//z-index: 100;
color:white;
left: 10px;
font-size: 15pt;
opacity: 0;
}
.first_description {
top: 50px;
position: absolute;
//z-index: 100;
color:white;
left: 10px;
font-size: 12pt;
opacity: 0;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.