Question

我目前正在为我的网站制作布局，而我在覆盖控制社交图标的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;    
}

如果有人帮我解决这个问题，我会很感激：）

@edit

好的，我有办法解决它。代码应如下所示：

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

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

但是知道出现了另一个问题。下面的菜单栏正在继续悬停xD所以我必须弄清楚如何阻止它移动。任何想法怎么做？

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

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

Answer 1

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

img.social :hover { ... }

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

你想要

img.social:hover { ... }

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

社交图标在悬停时移动

1 个答案: