3

css を使用して、自分のサイトでこのホバー マップを作成しました: http://travel-fellow.com/destinations 大陸にホバーすると、色が変わります。しかし、一番下に別のリストがあり、他のリストにカーソルを合わせている間は機能しませんでした。HTML:

<ul id="continents">
<li class="northamerica"><a href="">North America</a></li>
<li class="southamerica"><a href="">South America</a></li>
<li class="asia"><a href="">Asia</a></li>
<li class="australia"><a href="">Australia</a></li>
<li class="africa"><a href="">Africa</a></li>
<li class="europe"><a href="">Europe</a></li>
</ul>

<ul id="continentslist">
     <li class="northamerica2"><a href="">North America</a></li>
    <li class="southamerica2"><a href="">South America</a></li>
    <li class="asia2"><a href="">Asia</a></li>
    <li class="australia2"><a href="">Australia</a></li>
    <li class="africa2"><a href="">Africa</a></li>
    <li class="europe2"><a href="">Europe</a></li>
</ul>

そしてCSS：

ul#continents {
    background: url("continents-540.png") no-repeat scroll 0 0 transparent;
    height: 268px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 580px;
}
ul#continents li {
    position: absolute;
}
ul#continents li a {
    display: block;
    height: 100%;
    text-indent: -9000px;
}
ul#continents li.northamerica {
    height: 163px;
    left: 0;
    top: 2px;
    width: 237px;
}
.southamerica {
    height: 124px;
    left: 116px;
    top: 164px;
    width: 93px;
}
.africa {
    height: 97px;
    left: 209px;
    top: 132px;
    width: 116px;
}
.europe {
    height: 113px;
    left: 239px;
    top: 19px;
    width: 87px;
}
.asia {
    height: 182px;
    left: 304px;
    top: 12px;
    width: 168px;
}
.australia {
    height: 95px;
    left: 390px;
    top: 152px;
    width: 114px;
}
ul#continents li a:hover {
    background: url("continents-540.png") no-repeat scroll 0 0 transparent;
}
ul#continents li.northamerica a:hover {
    background-position: -221px -318px;
}
ul#continents li.southamerica a:hover {
    background-position: 10px -536px;
}
ul#continents li.africa a:hover {
    background-position: -243px -537px;
}
ul#continents li.europe a:hover {
    background-position: -401px -514px;
}
ul#continents li.asia a:hover {
    background-position: -34px -324px;
}
ul#continents li.australia a:hover {
    background-position: -92px -527px;
}

私は joomla を使用しているため、jquery の使用を避けようとしています。

4

1 に答える 1

3

純粋なCSSを使用してそれを行うことができます

デモhttp://jsfiddle.net/kevinPHPkevin/daFDn/1163/

img.tree:hover ~ ul .tree {
    background:#ccc;
}

img.lion:hover ~ ul .lion {
    background:#ccc;
}

あなたの場合、国のホバーを正しいリスト要素に割り当てます。例として 2 つのランダムな画像を使用しましたが、理論は当てはまります。これらのセレクターは IE7+ でサポートされています

編集済み

すべてのブラウザーをサポートしたい場合は、jQuery バックアップのサポート、または jQuery のみのソリューションを提供してください。

デモhttp://jsfiddle.net/kevinPHPkevin/daFDn/1167/

$('.lion-img').hover(
  function () {
    $('.lion').addClass('active');
  }, 
  function () {
    $('.lion').removeClass('active');
  }
);
$('.tree-img').hover(
  function () {
    $('.tree').addClass('active');
  }, 
  function () {
    $('.tree').removeClass('active');
  }
);
于 2013-07-16T13:53:44.810 に答える