0

そこで、学校のプロジェクトとして「太陽エネルギー」のHTMLを作っています。私はインドで7番目のクラスにいます。＃source、＃source_wr、および＃arrow-rightのIDを持つこれらのdivにカーソルを合わせると、それが必要になります。#sourceを使用したdivの背景色を変更する必要があります。

#source自体にホバリングすることはできますが、他の2つにはホバリングできません。これが私が使用しているコードです：

<div id="arrow-right"></div>
<div id="source_wr">Source</div>
<a href="http://www.wikipedia.org/" target="_blank">
<div id="source">
</div>
</a>

そしてここにcssがあります：

#source_wr{
color: #56C8E3;
font-family: oswald, sans-serif;
font-size: 20px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 200;
position:absolute;
top:210px;
right:300px;
}
#arrow-right{
width:0px;
height:0px;
border-bottom:25px solid transparent;
border-top:25px solid transparent;
border-left:25px solid #56C8E3;
position:absolute;
top:180px;
right:270px;
}
#source{
position:absolute;
top:0px;
right:0px;
height:240px;
width:264px;
background:url('wiki.png');
background-size:264px 240px;
}
#source:hover{
background:url('wikihover.png');
background-size:264px 240px;
}
#source_wr:hover + #source{
background:url('wikihover.png');
background-size:264px 240px;
}

しかし、これは機能していませんg !!! もっと具体的にする必要がある場合は、助けてください... Javascriptなしでは達成できないと言わないでください！そして、ええ、すべてのdivは本体の中に直接あります（ただし、メインページのすべてとさらに多くのdivを含むdivの後に）

前もって感謝します。

HTML全体のリンクは次のとおりです...ダウンロードする必要のないPSDファイルを除いて、同じフォルダ内のすべてをダウンロードしてください。https://docs.google.com/folder/d/0BwFpYt0oAQbqT0xiUDNNRTVQOWs/edit?usp=sharing

4

3 に答える 3

0

  1. あなたはあなたを閉じませんでした<a>

  2. <a>に変更することをお勧めします<span>

 

$('.source').on('click', function () {
    var url = $(this).find('span').attr('src');
    window.location(url);
});
$('.source').on('hover', function () {
    $(this).css('background-color', '#999'); //new color
}, function {
    $(this).css('background-color', '#666'); //original color
});
于 2013-02-25T06:01:35.317 に答える
0

general-sibling-combinator を試してみてください。次の兄弟を選択します~が、+onのように次の兄弟を選択します。

#source_wr:hover ~ a #source,#arrow-right:hover ~ a #source{
    background:url('wikihover.png');
    background-size:264px 240px;
}
于 2013-02-25T05:47:27.090 に答える
0

次のCSSで効果を簡単に適用できます

#source_wr:hover #source{*the effect you want on source*}
#arrow-right:hover #source {*The effect you want on source*}
#source:hover {*effect*}
于 2013-02-25T07:22:59.690 に答える