0

我目前正在为我的网站制作布局，但在覆盖控制社交图标的 CSS 时遇到问题。看起来像这样：http ://hotarubi.pl/docuworks/index.html

我希望图标在悬停时向上移动，但父选择器具有阻止执行此操作的标准方法的属性。

这是我的代码：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="Stylesheet" href="style.css" />
    <title>Docuworks</title>
</head>
<body>

<header id="head">
    <a href="#" target="_blank"><img class="social" src="images/theme/fb.png" /></a>
    <a href="#" target="_blank"><img class="social" src="images/theme/tweeter.png" /></a>
    <a href="#" target="_blank"><img class="social" src="images/theme/rss.png" /></a>
</header>

<nav id="menu">
    <div class="bg-repeat"></div>
</nav>

</body>
</html>

和

body 
{   margin: 0;
    padding: 0;
    background-image: url(images/theme/bg.png);
}

img.social
{   top: 50px;
    left: 80%;
    z-index:-1;
    position: relative;
    margin-bottom: -50px;   
}

img.social :hover 
{
    top: 0px !important;
    margin-bottom: 50px !important;
}

#menu
{
    margin-top: 50px;
    height: 60px;
    background: url(images/theme/logo.png), url(images/theme/login.png);
    background-position: top left, top right; 
    background-repeat: no-repeat, no-repeat;
}

div.bg-repeat
{
    margin: 0 314px 0 258px;
    height: 60px;
    background: url(images/theme/bg-r.png) repeat-x;    
}

如果有人能帮助我解决这个问题，我将不胜感激:)

@编辑

好的，我设法解决了。代码应如下所示：

img.social
{   top: 50px;
    left: 80%;
    position: relative;
    margin-bottom: -50px;   
}

img.social:hover 
{
    top: 50px;
    margin-bottom: -25px !important;
}

但知道又出现了一个问题。下面的菜单栏也在悬停移动 xD 所以我必须弄清楚如何阻止它移动。任何想法如何做到这一点？

@编辑 2

这次做对了，代码如下：

body 
{   margin: 0;
    padding: 0;
    background-image: url(images/theme/bg.png);
}

img.social
{   
    top: 50px;
    left: 80%;
    position: relative;
    margin-bottom: -50px;
}

img.social:hover 
{
    top: 25px;  
}

#menu
{   
    z-index: 1;
    position: relative;
    margin-top: 50px;
    height: 60px;
    background: url(images/theme/logo.png), url(images/theme/login.png);
    background-position: top left, top right; 
    background-repeat: no-repeat, no-repeat;
}

div.bg-repeat
{
    margin: 0 314px 0 258px;
    height: 60px;
    background: url(images/theme/bg-r.png) repeat-x;    
}

如果有人碰巧遇到同样的问题，以供将来参考。

4

1 回答 1

2

您在这里使用了错误的选择器：

img.social :hover { ... }

这将选择悬停状态中具有“社交”类的图像元素的后代 - 但图像没有任何后代元素。

你要

img.social:hover { ... }

相反 - 它定义了:hover图像本身的格式。

于 2013-05-31T08:57:27.013 回答