divにホバリングしたときのボディカラーの変更方法

私は現在、友人のための非常に基本的なページをコーディングしています。私はいくつかのことを試しましたが、どれもうまくいかないようです。divにホバリングしたときのボディカラーの変更方法

これは、体がどのように見えるかです：

body { 
 
    color: #fff; 
 
    background: #98adca; 
 
    text-align: center; 
 
    margin: 275px auto; 
 
} 
 
#box { 
 
    padding: 30px; 
 
    border: solid; 
 
} 
 
li { 
 
    list-style: none; 
 
    text-decoration: none; 
 
} 
 
a, 
 
a:hover, 
 
a:active, 
 
a:visited { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 
.twt:hover { 
 
    background: #c3c0d1; 
 
    color: #fff; 
 
}

<div id="box"> 
 
    <h1><a href="{BlogURL}">social media</a></h1> 
 
    <div class="twt"> 
 
    <li><a href="#">twitter</a> 
 
    </li> 
 
    </div> 
 
    <div class="ig1"> 
 
    <li><a href="#">art instagram</a> 
 
    </li> 
 
    </div> 
 
    <div class="ig2"> 
 
    <li><a href="#">regular instagram</a> 
 
    </li> 
 
    </div> 
 
    <div class="fb"> 
 
    <li><a href="#">facebook</a> 
 
    </li> 
 
    </div> 
 
    <div class="yt"> 
 
    <li><a href="#">youtube</a> 
 
    </li> 
 
    </div> 
 
</div>

しかし、私はちょうど、例えば、上にマウスを移動するときボックスに別の色を作るためにCSSを記述する必要がありますどのように私は得ることはありませんYouTubeのリンク。私の現在のCSSでは、ボックス全体ではなく、ホバリング時にテキストの背景のみが変更されます。

出典

2016-10-19 Linnea Kleibrant

どのボックスを色替えしたいですか？ – repzero

ボーダーiが本体内に作成された –

CSSは親要素を選択できません。あなたが望むものは、このHTML構造を使っては不可能です。 – CBroe

-1

代わりの背景は背景色を試してみてください

出典

2016-10-19 22:01:05

それはまだ同じです –

利用のjQuery：

$(".twt").hover(
    function() { 
     $("#box").css("background-color", "#000"); 
    }, 
    function() { 
     $("#box").css("background-color", "#98adca"); 
    } 
);

あなたはjQueryのを設定する支援が必要な場合は、私に教えてください。

出典

2016-10-19 22:10:39

は "onmouseover属性" イベントではjQueryを使用してみてください：

HTML：

<div id="box"> 
    <a onmouseover="colorChange()" onmouseout="revert()" href="#">Link</a> 
</div>

Javascriptを：

function colorChange() { 
    $("#box").css("background-color", "red"); 
} 
function revert() { 
    $("#box").css("background-color", "lightgrey"); 
}

ここでは私のペンです：http://codepen.io/Hudson_Taylor11/pen/ozQogO

・ホープ、このことができます！

出典

2016-10-19 22:16:56

私が知っているところから。 CSSは後方に歩くことはできません。私ができる方法について考えることができるのは、jQueryを使ってそれを行うことです。

$(document).ready(function(){ 
 
    $('.ig1 li a').hover(function(){ 
 
    $('#box').css({'background-color': 'green'}); 
 
    }); 
 
    $('.ig2 li a').hover(function(){ 
 
    $('#box').css({'background-color': 'blue'}); 
 
    }); 
 
    $('.yt li a').hover(function(){ 
 
    $('#box').css({'background-color': 'red'}); 
 
    }); 
 
    
 
    $('.fb li a').hover(function(){ 
 
    $('#box').css({'background-color': 'pink'}); 
 
    }); 
 
    
 
});

body { 
 
      color: #fff; 
 
      background: #98adca; 
 
      text-align: center; 
 
      margin: 275px auto; 
 
      padding: 30px; 
 
     } 
 
     #box { 
 
     border: 3px solid #fff; 
 
     padding: 30px; 
 
     } 
 
     li { 
 
      list-style:none; 
 
      text-decoration:none; 
 
     } 
 
     a, a:hover, a:active, a:visited { 
 
      color: #fff; 
 
      text-decoration:none; 
 
     } 
 
     .twt:hover { 
 
      background: #c3c0d1; 
 
      color: #fff; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<div id="box"> 
 
    <h1><a href="{BlogURL}">social media</a></h1> 
 
    <div class="twt"> 
 
     <li><a href="#">twitter</a></li> 
 
    </div> 
 
    <div class="ig1"> 
 
     <li><a href="#">art instagram</a></li> 
 
    </div> 
 
    <div class="ig2"> 
 
     <li><a href="#">regular instagram</a></li> 
 
    </div> 
 
    <div class="fb"> 
 
     <li><a href="#">facebook</a></li> 
 
    </div> 
 
    <div class="yt"> 
 
     <li><a href="#">youtube</a></li> 
 
    </div> 
 
</div> 
 
</body>

出典

2016-10-19 22:41:39 Gfie

右ので、私はあなたがJSでそれを行うことができ、考え始めていますが、純粋なCSSでそれを行うことができます。
短答 - いいえ。
CSSは、セキュリティなどの理由により、子要素が親要素にアクセスすることを許可しません。シンプルなGoogle検索では、私が読んだすべてのものが表示されます。ここでドキュメントを共有することはできません。

私たちがユーザーをだましたら、ちょうど私を聞いてどうでしょうか？

の代わりに違法である親の色を変更する、のは、兄弟の色を変えてみましょう - CSSLink

によって許可さだから私は（彼らはまだ独立してい同じクラスを共有するためのリンクについては、あなたのクラスを統一ID、チル）。私はその後、身体の目的に役立つ "偽りのdiv"を追加しました。私は "ふりをして"、統一されたdivを書式化し、 "兄弟にホバー" CSSルールを追加しました。正直、これが最善の解決策ではありません、私は承知している備考 `

<body> 
<div class="box"> 
    <h1><a href="{BlogURL}">social media</a></h1> 
    <div class="link_divs" id="div_1"> 
     <li><a href="#">twitter</a></li> 
    </div> 
    <div class="link_divs" id="div_2"> 
     <li><a href="#">art instagram</a></li> 
    </div> 
    <div class="link_divs" id="div_3"> 
     <li><a href="#">regular instagram</a></li> 
    </div> 
    <div class="link_divs" id="div_4"> 
     <li><a href="#">facebook</a></li> 
    </div> 
    <div class="link_divs" id="div_5"> 
     <li><a href="#">youtube</a></li> 
    </div> 
    <div id="pretend_div"> 
    </div> 
</div> 
</body>

そして、ここでは、CSS

body { 
     color: #fff; 
     background: #98adca; 
     text-align: center; 
     margin: 275px auto; 
     padding: 30px; 
     border: 3px solid #fff; 
     height: 100%; 
    } 
    li { 
     list-style:none; 
     text-decoration:none; 
    } 
    a, a:hover, a:active, a:visited { 
     color: #fff; 
     text-decoration:none; 
    } 

    /* IMPORTANT - This will be the new "body" */ 
    #pretend_div{ 
     position: absolute; /* REQUIRED */ 
     width: 96%;   /* Matching your body size */ 
     height: 180px;  /* Matching your body size */ 
     border: 1px solid red; /* Differentiating made easy */ 
     top:0;    /* IMPORTANT - push the element to the top */ 
     left: 0;   /* IMPORTANT - push the element to the left */ 
     margin: 275px auto; /* Grabbed the margin from your body */ 
     padding: 30px;  /* Grabbed the padding from your body */ 
     z-index: -1;  /* IMPORTANT - push the element to the back of stack */ 
    } 
    /* IMPORTANT - generic link class */ 
    .link_divs{ 
     z-index: 0;   /* IMPORTANT - set the links on-top of the pretend div */ 
     position: relative; /* IMPORTANT - positioning */ 
    } 

    /* What link you hover over ~ The pretend div */ 
    #div_1:hover ~ #pretend_div{ 
     background-color: #00A000; /* change bck colour */ 
    } 
    #div_2:hover ~ #pretend_div{ 
     background-color: orangered; 
    } 
    #div_3:hover ~ #pretend_div{ 
     background-color: darkgoldenrod; 
    }

だ

HTML：見てみましょう - JSを使用してください。しかし、私は純粋なCSSでそれを実現しようとしたかった。今私は可能な限り最高の状態であなたの体にふりを合わせようとしました。したがって、それは可能な限り良くはありません。私は、各行で起こっていることを理解するのに役立ついくつかのコメントを追加しました。「兄弟スタイル」CSSを使用するものは、重要度とマークされています。それ以外は体のスタイルにマッチしているだけです。

JSFiddleデモ - >DEMO LINK

希望すること

出典

2016-10-19 23:12:49 MSarandev

divにホバリングしたときのボディカラーの変更方法

答えて

関連する問題