1

タイトルで説明されているように、使用している背景画像があり、ページの特定の領域でdivにカーソルを合わせると画像を変更したいと考えています。

現在、の背景画像は#mainです。4Era_home.jpgカーソルを合わせると#television、その背景画像をに変更したいと思い4Era_home_tv.jpgます。

私はオンラインで探していたので、これが理にかなっていることを願っていますが、うまくいく解決策を見つけることができません。私はcssがこれでは機能しないことを知っているので、このためのjqueryまたはjavascriptのヘルプが役立ちます。

<div id="main">
    <div id="television">
        <a href="#" id="tv_glow">test</a>
    <div>
</div>
4

3 に答える 3

0

これは機能するはずです：

var child = $( '#television' ),
    parent = child.parent();

child.hover( function(){
  parent.addClass( 'tv-image' );
}, function(){
  parent.removeClass( 'tv-image' );
});

CSS

.tv-image { background-image: url( 'path/to/4Era_home_tv.jpg' ); }
于 2012-09-09T23:02:11.660 に答える
0

CSSとjQueryを使用できます。

以下の例で、デフォルトの画像を指すデフォルトのクラスを使用するようにHTMLを更新しますhome。

<div id="main" class="home">
    <div id="television">
        <a href="#" id="tv_glow">television test</a>
    <div>
</div>​

以下のようなCSSスタイルを使用して、必要な画像を定義します:(
私が使用したスタイル#mainはDEMO専用であり、関心のあるスタイルは次のとおり.homeですtv）

#main{
  background-repeat:no-repeat;
  text-align: center; 
  width:200px;
  height:200px;
}

.home
{
  background-image:url('http://www.fileden.com/files/2012/6/19/3318010/Eraser.png');
}

.tv
{
  background-image:url('http://www.fileden.com/files/2012/6/19/3318010/Ok.png');
}

toggleClass()次のようにjQueryを使用してクラスを切り替えます。

$("#television").hover(function() {
    var $parent = $(this).parent();
    $parent.toggleClass("home, tv");
}, function() {
    var $parent = $(this).parent();
    $parent.toggleClass("home, tv");
});​

DEMO-親要素の背景画像を切り替える

于 2012-09-09T23:02:52.140 に答える
0

以下の関数に基づく簡単なJavaScriptソリューションは次のとおりです。

<a onmouseover="util.addClassName('main', 'tv-glow');"
   onmouseout="util.removeClassName('main', 'tv-glow')"
   href="...">test</a>

リスナーを動的にアタッチすることをお勧めします。また、クラスをスワップインおよびスワップアウトする「トグル」関数を使用することもできます。

ホバー効果はタッチスクリーンデバイスではかなり役に立たないことに注意してください。

すべての開発者がツールボックスに持つべきいくつかの機能：

var util = util || {};

util.hasClassName = function(el, cName) {
    if (typeof el == 'string') el = document.getElementById(el);

    var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)');
    return el && re.test(el.className);
}

util.addClassName = function(el, cName) {

    if (typeof el == 'string') el = document.getElementById(el);

    if (!util.hasClassName(el, cName)) {
        el.className = el.className + ' ' + cName;
    }
}

util.removeClassName = function(el, cName) {

    if (typeof el == 'string') el = document.getElementById(el);

    if (util.hasClassName(el, cName)) {
        var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)','g');
        el.className = el.className.replace(re, '');
    }
}
于 2012-09-09T23:32:09.453 に答える