Question

我正在创建一个网站，并希望在div中有一个链接，当它悬停时会改变颜色，但是我遇到了一个问题。在悬停时，我希望div周围的边框与链接里面的文本颜色相同。背景颜色应为白色。然后，在悬停时，我希望背景颜色更改为文本和边框的颜色，并将文本变为白色。因为我在链接和div边界之间有填充，所以它不能按预期工作。这是源html / css：

HTML：

<div id="home">
    <a href="index.html">HOME</a>
</div>

CSS：

#home {
    border: 4px solid #00a651;
    font-size: 30px;
    padding: 10px 20px 10px 20px;
    margin: 20px 100px 20px 100px;
    display: inline-block;
}
#home a {
    background: #ffffff;
    color: #00a651; 
    text-align: center;
}
#home a:hover {
    background: #00a651;
    color: #ffffff;
}

当div中的任何地方悬停在链接以外的任何位置时，没有任何反应，当您将鼠标悬停在链接上时，填充仍为白色。我需要做些什么才能让div上任何地方的颜色发生变化，并且整个颜色变化？谢谢，布兰登：）

Answer 1

您需要将悬停事件添加到div和锚点：

#home {
    border: 4px solid #00a651;
    font-size: 30px;
    padding: 10px 20px 10px 20px;
    margin: 20px 100px 20px 100px;
    display: inline-block;
}
#home a {
  background: #ffffff;
  color: #00a651; 
  text-align: center;
}
#home:hover {
  background: #00a651;
  color: #ffffff;
}

#home:hover a {
    background: #00a651;
    color: #ffffff;
}

<div id="home">
    <a href="index.html">HOME</a>
</div>

Answer 2

＆＃13;

#home {
    font-size: 30px;
    margin: 20px 100px 20px 100px;
    display: inline-block;
}
#home a {background: #ffffff;
    border: 4px solid #00a651;
    padding: 10px 20px 10px 20px;
         color: #00a651; 
         text-align: center;
}
#home a:hover {background: #00a651;
               color: #ffffff;
}

＆＃13;

<div id="home">
    <a href="index.html">HOME</a>
</div>

＆＃13;

Answer 3

我建议您使用 jQuery库 ，如果您知道如何使用它：

将您的jQuery下载链接到主html文件或使用CDN。

在您的JavaScript文件中，在您的链接上添加悬停事件，并使用css效果在您将鼠标悬停在链接上时更改div的颜色。然后添加另一个css效果，以便链接像div一样改变颜色。像这样：

 $(document).ready(function(){
   $('a').hover(function(){
     $('#home').css("background-color","#00a651");
     $('a').css("color", "chooseacolor");
  });
});

我不完全确定你的要求，所以这是我能给出的最佳答案！

Answer 4

我不认为使用：将鼠标悬停在DIV元素上是一个好主意。据我所知，并非所有版本的浏览器都完全支持这种做法。为什么不使用一些JS？

但是，无论如何，如果你需要DIV中的所有区域（包括填充）变得可点击 - 你应该做它＆＃34; display：block＆＃34;在CSS。

＆＃13;

$(document).ready(function() {
    $('#home').hover(function() {
        $(this).css('background-color', '#00a651').find('a').css({
          backgroundColor: '#00a651',
          color: '#FFFFFF'});        
    }, function() {
        $(this).css('background-color', '#FFFFFF').find('a').css({
          backgroundColor: '#ffffff',
          color: '#00a651'});        
    });
});

＆＃13;

#home {
    border: 4px solid #00a651;
    font-size: 30px;
    padding: 10px 20px 10px 20px;
    margin: 20px 100px 20px 100px;
    display: inline-block;
}
#home a {background: #ffffff;
        color: #00a651; 
        text-align: center;
}
/* There is no need to use :hover anymore if using a script */

＆＃13;

<!-- this goes to the HEAD section if not arleady there -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<div id="home">
    <a href="index.html">HOME</a>
</div>

＆＃13;

如何在悬停时更改整个div的背景颜色？

4 个答案: