0

私は自分と同様の他の質問を調査し、正しい方向に向けられましたが、私のケースは少し異なると思います. 私はCSSが初めてなので、ご容赦ください！ホバー時にインタラクティブなロゴを作成しようとしています。ある程度の成果はありましたが、より良いものにしたいと考えています。ロゴは、レーキとその上のテキストである別のイメージの 2 つのイメージで構成されています。ホバーすると、レーキがレーキの動きをするようにしますが、テキストは静的なままにします。ホバー時にレーキ (下の画像) を動かすことに成功しましたが、レーキ (下の画像) がテキスト (上の画像) で覆われているだけでカーソルを移動するのは困難です。

<div id="container">
<div class="logo">
    <img src="rake-logo-top.png" width="214" height="170" />
</div>
<div class="vertpan pic">
    <img src="rake-logo-bottom.png" >
</div>
</div>

CSS:

#container {
height:304px;
width: 246px;
margin: 20px;
cursor: pointer;
}

.logo {
    position: absolute;
    z-index: 2;
    padding-top: 105px;
    padding-left: 15px;
}

.pic {
  height: 304px;
  width: 246px;
  overflow: hidden;
}

/*VERTPAN*/
.vertpan img {
  position: relative;   
  margin-top: 100px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
  z-index: 1;
}

.vertpan img:hover {
  margin-top: 0px;
}

これは、次のような方法で実行できることを知っています。

#container:hover + vertpan img {
  margin-top: 100px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
  z-index: 1;
}

しかし、それはまったく正しくありません。「vertpan」コードは事前にフォーマットされており、変更しています。基本的に、#container または .logo のいずれかにカーソルを合わせて、.pic だけにカーソルを合わせたときと同じ反応を得たいと考えています。私は数回試してみましたが、立ち往生しています...すでに.picにホバー効果があるからですか?

どんな助けでも大歓迎です！

4

1 に答える 1

1

あなたの質問は Q&A 形式に適合しませんが、私は利他的であると感じ、あなたに例を挙げました

HTML 観察

  • この効果には、タグの代わりに background-images を使用する必要があります<img>。画像は、意味的に言えば、コンテンツではありません。
  • ロゴにテキスト レイヤーがある場合は、必ずテキストを使用する必要があります。

  • cursor: pointerおそらくサイトのホームなど、どこかにリンクしているために使用していると思いますので<a>、コンテナにタグを使用することをお勧めします。

    <a id="logo" href="#">
    <div class="text">Logo text</div>
    <div class="background"></div>
</a>

CSS の観察

  • ポジショニングが複雑になりすぎているため、例を統合するのが難しくなります。
  • コンテナではなく背景画像に絶対配置を使用してみてください。私の例を参照してください。

  • transition状態の動作を定義する:hoverと、この動作は他の状態の要素には影響しません。

    /**
 * Make logo width responsive to its text,
 * while staying as block.
 * Any absolute content will be relative to this
 * Remove the default underline for the <a> tag
 */
#logo {
    display: inline-block;
    position: relative;
    text-decoration: none;
}
/**
 * place the background layer on 0,0
 * make them responsive to parent width and height
     * correct the z-index to display it behind the text
 * set transition time and easing
 */
#logo .background {
    position: absolute;
    top: 0; left: 0; 
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-transition: all .5s ease;
}
/**
 * Just decoration for prettyness:
 * - Background image
 * - Text color
 * - Set a size which fits the bg image aspect ratio
 */
#logo .background {
    background: url("http://lorempixel.com/g/214/170/abstract/1") no-repeat;
    background-size: contain;
}
#logo .text {
    color: gold;
    width: 214px; height: 170px;
}
#logo:hover .background {
    margin-top: -20px;
}

私の答えがあなたに役立つことを願っています

于 2013-06-07T01:49:21.847 に答える