当鼠标悬停在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中，只有文字的背景在悬停时更改，而不是整个框。

你想改变颜色的盒子？ – repzero

我在身体边框的内部 –

CSS无法选择父元素;你想要的是不可能使用这个HTML结构。 – CBroe

答

，而不是背景试用背景色

它仍然是一样的 –

答

使用jQuery：

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

让我知道如果您需要帮助设置的jQuery。

答

尝试使用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

希望这有助于！

答

从我所知道的。 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>

答

对，所以我就开始想，你可以用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

希望帮助

当鼠标悬停在div上时，如何改变主体颜色

相关推荐