悬停在文本jQuery上

我遇到了一个问题，我不太确定如何解决。

目前，当一个人将鼠标悬停在这张特定的图片上时，不透明度下降(显示背景颜色)并显示类型。问题是，我希望它继续表现得好像它悬停在上面，即使它们悬停在类型上。

我应该尝试改变z-index吗?由于某些原因，这不起作用…

JSFIDDLE http://jsfiddle.net/4jrUp/

<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

.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

$(".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"); });
谢谢!

实际上不需要使用jQuery。

更新的例子在这里 -(我在那里也添加了一个可选的过渡…)
使父元素.bg, block为级别，并设置其上的border-radius和尺寸。重要的是它是相对定位的，所以子元素是绝对定位的，相对于父元素。

.bg { background-color: rgba(48, 48, 48, 0.9); position:relative; height:200px; width:200px; display:block; border-radius:25px; overflow:hidden; }
:hover部分其实很简单，你所要做的就是改变opacity。

.bg:hover .first_title, .bg:hover .first_description { opacity:1; } .bg:hover .portfolio-item { opacity:.1; }
和其余的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; }

尝试将悬停事件添加到。bg而不是。portfolio项，这样您就可以删除z-index。

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"); });
和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; }
看这个

相关内容

最新更新

热门标签：