web-dev-qa-db-ja.com

drupal 7のビューでホバー効果またはマウスオーバー効果を持つ

私はプロジェクトのスタッフページを作成しています。また、スタッフページにリンクする画像（ビューを使用）を配置しています。私が本当にクールだと思ったのは、画像の上でマウスをスクロールしたときに、それが人物の名前に変わった場合です。どうすればいいのかまったくわからないので、数時間の検索の後、助けが必要です。

前もって感謝します。

7viewsnodes
2
amiller

あなたはこのような簡単なことをすることができます：

HTML

<a class="person" href="#">
   <img src="" width="100" height="100">
   <span>John Doe</span>
</a>

CSS

a.person {
    border: 1px solid #ddd;
    display: block;
    height: 100px;
    overflow: hidden;
    width: 100px;
}
a.person:hover img {
    display: none;
}
a.person span {
    display: block;
    text-align: center;
    margin: 20% 0 0;
}

フィドル： http://jsfiddle.net/fXnmr/

フェード効果などが必要な場合は、JavaScript/jQueryルートに移動する必要があります。

2
enzipher

ビューを使用している場合は、画像フィールドをエンジファーでコードで上書きしますが、スタッフ名にはトークンを使用して、「スタッフ名」フィールドから取得します。次に、CSSとJSを使用して残りの空想的なことを行います。

そう...

コンテンツタイプを編集して、「スタッフ名」と「スタッフ画像」を追加しますフィールドのビューを作成します「スタッフ名」と「スタッフ画像」を追加しますスタッフ名を表示せず、画像の上に配置します上記のコードとスタッフ名と画像の置換パターンを使用します。

これをコンテンツにリンクしたい場合は、「コンテンツにリンク」などをクリックしないでください。上記の組み合わせにNIDフィールドを追加し、表示から除外して、リンクに書き込みます。

またはそれらの線に沿って何か。

それが役に立てば幸い、私は写真が添付されているように見える似たようなもので戦いを終えた...

幸運を！！

preview

1
tea2sugars

次のことができます。

ビューに名前と画像を追加します。

Cssを使用すると、最初に完全にカバーする画像の下に名前が配置されます。

ここで再びcssを使用して、画像にカーソルを合わせ、表示をnoneに設定して、非表示にして名前が表示されるようにします。

何らかのアニメーション効果が必要な場合は、JSを使用します

0
Mohammed Shameem