0

I did a little thing that I want to use for a website which will show about each of the team. There are 3 social icons, which I positioned absolutely. The layout is ok. My problem is that I want to add it some css effect, but am not sure if css can do it.

Here is the plan. 1. I want when a user hovers over any of the social icon, it will slide up a bit. I know if the icons are positioned relative, I will just add transition to it and make it's hover- top:-5px; But since it's positioned absolute, it's not working. Is there a work around to this?

  1. I want a situation when a user hovers over any of the icon, the big circle background carrying the human picture will change to the background color of that particular icon that was hovered.

Here is the codepen and the fullscreen

4

3 に答える 3

1
  1. でご利用いただけmargin-bottomます.icon:hover。これは、アイコンを配置するときに加算されbottomます。

  2. 現在のマークアップでそれができるかどうかはわかりません。少し再構築する必要がありました。

    • .pix マークアップで後 に移動し.iconsました。
    • .iconクラスを<a>リンクに移動したので、それぞれ.pixの兄弟.iconです。

    そのようにして、兄弟セレクター.icon:hover ~ .pixを使用して、アイコンがホバーされたときに画像をターゲットにするか、さらにそれを指定して.fb:hover ~ .pix、Facebook アイコンがホバーされたときに画像をターゲットにすることができます。次に、 を変更しbackground、必要に応じて適切なトランジションを追加して、色がスムーズにフェードするようにするだけです。

ほら、二股ペン！

于 2013-05-31T20:18:34.077 に答える
0

ボトム ポジションを使用しているので、これを行うことができます。代わりに、その上に遷移します。

.fb {
    background:#3b5998;
    position:absolute;
    z-index:1;
    left:110px;
    bottom:3px;
    transition: bottom 1s;
    -webkit-transition: bottom 1s;
}

.fb:hover{
    bottom:7px;
}

アイコンの 1 つにカーソルを合わせたときにメイン画像の背景色を変更することに関しては、CSS だけでそれを実現できるかどうかはわかりません。現在のマークアップでは確かにそうではありません。

于 2013-05-31T20:05:02.533 に答える
0

ホバー時に下マージンを追加してから、それを移行できます。

.icon{
    border-radius:100%;
    width:48px;
    height:48px;
    -webkit-transition: margin-bottom .5s;
            transition: margin-bottom .5s;
}
.icon:hover {
    margin-bottom: 10px;
}
于 2013-05-31T20:06:31.433 に答える