Html 社交图标悬停移动_Html_Css

Html 社交图标悬停移动

html css

Html 社交图标悬停移动,html,css,Html,Css,我目前正在为我的网站做一个布局，我有一个覆盖控制社交图标的CSS的问题。看起来是这样的：我希望图标在悬停时向上移动，但父选择器的属性阻止了执行此操作的标准方法这是我的密码： <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel="Stylesheet" href="style.css" /> <title>Docuworks&

我目前正在为我的网站做一个布局，我有一个覆盖控制社交图标的CSS的问题。看起来是这样的：

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

这是我的密码：

<!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>

如果有人能帮我解决这个问题，我将不胜感激：）

@编辑

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

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

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

但我知道另一个问题出现了。下面的菜单栏在hover to 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;    
}

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

您在此处使用了错误的选择器：

img.social :hover { ... }

这将选择类“social”处于悬停状态的图像元素的后代，但图像没有任何后代元素

你想要

img.social:hover { ... }

相反-这定义了

：悬停格式化图像本身。好吧，这是因为图像顶部有其他元素（尝试右键单击并“使用firebug检查元素”或任何您正在使用的开发工具-最终选择主体或标题）-所以你的图片从来没有真正悬停过。我删除了标题部分，奇怪的是浏览器甚至看不到链接。问题解决了。谢谢你的提示。他们帮我自己解决了这个问题：）
img.social:hover { ... }