Question

其实我想将鼠标悬停在内部超链接的div上，但我不知道如何在CSS中。这些div实际上在css中附加了背景图像。

<div class="header_menu">
   <div class="foa_logo"><img src="images/FOA-Logo.jpg"/></div>
   <div class="address"></div>
   <a href="#"><div class="home"></div></a>
   <a href="#"><div class="about"> </div></a>
   <a href="#"><div class="services"></div></a>
   <a href="#"><div class="contact"></div></a>        
</div>

Answer 1

试试这个：

element:hover {
  property: value;
}

通过这种方式，您可以在元素悬停时更改元素的CSS属性！

所以对你来说，你会尝试：

.home:hover { // on the home div..
  // all the changes here
}

Answer 2

div { 
  width:100px; 
  transition: width 2s; 
}
div:hover {
  width:200px;
}

如果您只想选择该类，请使用.foa_logo替换div。

Answer 3

我为你创建了一个jsfiddle，展示了如何做你想要的hover。我删除了超链接中的divs，因为它们没用。您只需设置a代码的样式，然后就可以获得hovers

http://jsfiddle.net/FHWb6/


.header_menu a {
    display:block;
    height:40px;
    width:100px;
    line-height:3;
    text-align:center;
    font-family:Arial;
    font-size:14px;
    text-transform:uppercase;
    float:left;
    position:relative;
    background:url(); /*put your image here*/
    background-color:#CC0;
    color:#FFF;
    text-decoration:none;
}

.header_menu a:hover {
    background:url(); /* put your hover image or position here */
    background-color:#ececec;
    color:#000;
}

我在那里添加了一些额外的代码，只是为了做一些基础样式 - color，height和width很可能会为你改变。

在超链接内设置div的样式;在悬停

3 个答案: