0

次のデモがあります: http://jsfiddle.net/EHrk4/2/

ハイパーリンクにカーソルを合わせるまで#mainが不透明度 1 のままで、その後 0.3になる可能性はありますか?

HTML:

<div id="main">    
    <a href="#">hover me to fade out main</a>
</div>

CSS:

#main {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    height:400px;
    width:400px;
    background:red
}

#main:not(:hover) {
    opacity: 0.3;
}

ご指摘ありがとうございます。

4

3 に答える 3

2

いいえ - リンクは影響を与えたい要素内にあり、現在 CSS2 または CSS3 に親セレクターはありません。

アンカーが div の兄弟要素である場合、必要に応じて div の不透明度に影響を与えることができます - この簡単なjsFiddle の例のように。

純粋な CSS で兄弟に影響を与える例:

HTML:

<a href="#">hover me to fade out main</a>
<div id="main">
</div>

CSS:

a:hover + #main {
    opacity:0.5;
}

内部に配置する必要がある場合は、 jQueryなどの Javascript ライブラリを使用して実現することをお勧めします。

または、子要素に影響を与える不透明度の回避策を説明している次の回答をご覧ください。

于 2013-04-24T13:56:42.463 に答える
1

私は個人的にjqueryを介してそれを行います。

http://jsfiddle.net/EHrk4/5/

JQ

$('#link').hover(function(){
    $('#main').addClass('hover');
}, function(){
   $('#main').removeClass('hover');
})

CSS

#main {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    height:400px;
    width:400px;
    background:red
}

.hover {
    opacity: 0.3;
}

編集：

私たちのコメントから、子要素の不透明度 1 を維持しながらそれを行う方法を次に示します。

http://jsfiddle.net/EHrk4/11/

于 2013-04-24T13:59:45.613 に答える
0

はい、これは可能です例えば:

#main,a{
   display:block;
   height:100px;
   width:100px;
}

アンカーheight,widthタグの を と同じにし#mainます。そのため、リンクにカーソルを合わせると、全体に影響が及び#mainます。それ以外の場合は、これに使用できますjquery。

于 2013-04-24T13:55:01.813 に答える