當鼠標懸停在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

我在身體邊框的內部 –

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

嘗試使用jQuery的「的onmouseover」事件：

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搜索會向您顯示我閱讀的所有內容，這裏沒有共享文檔的要點。

但是，如果我們欺騙用戶，對，只是聽我說。

而是更改父，這是違法的顏色，讓我們改變同級的顏色 - 由CSS允許Link

所以我統一的課程，對於鏈路共享同一個類（他們仍然有獨立ID，寒冷）。然後，我添加了一個「假裝div」，它將用於身體的目的。我將「假裝」，統一的div和「懸停」CSS規則添加了「兄弟姐妹」。請看：

HTML`

<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; 
    }

備註我知道這是不是最好的解決辦法，老老實實 - 只使用JS。但我想嘗試使用純CSS實現它。現在我試圖儘可能地將假裝div與你的身體相匹配，因此它看起來不如它可能。我添加了一些評論，以幫助您瞭解每條線路正在發生的情況。使用「兄弟風格」CSS的人被標記爲重要。其他一切只是匹配你的身體風格。

的jsfiddle演示 - >DEMO LINK

希望幫助

來源

2016-10-19 23:12:49 MSarandev

當鼠標懸停在div上時，如何改變主體顏色

回答

相關問題