將鼠標懸停在文本jQuery上

Question

我遇到了一個問題，我不太清楚如何解決它。

目前，當一個懸停在這個特定的圖片上時，不透明度下降（顯示背景顏色）並且出現類型。 問題是，我希望它繼續表現得像是在它上面盤旋，即使它們懸停在類型上。

我應該嘗試更改z-index嗎？ 出於某些原因，這些都不起作用......

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

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

.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");
});

謝謝！

Answer 1

實際上，你並不需要jQuery的這一點。

這里有更新的例子 - （我在那里添加了一個可選的過渡...）

創建父元素， .bg ， block級別，並在其上設置border-radius和dimensions。 重要的是它相對定位，以便子元素相對於父元素絕對定位。

.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;
}

Answer 2

嘗試將懸停事件添加到.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;
}

看到這個小提琴