0

現在、Web サイトのレイアウトを作成していますが、ソーシャル アイコンを制御する 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