2

PHPコードに小さな問題があります。誰かが私を助けてくれたらとても嬉しいです。リンクにカーソルを合わせたときに画像を表示したい。これは私が今持っているPHPコードとのリンクです：

<a href="<?php the_permalink(); ?>"><?php if ( has_post_thumbnail() ) {the_post_thumbnail();} else if ( has_post_video() ) {the_post_video_image();}?></a>

このコードは画像を示していますが、画像のあるリンクにカーソルを合わせると、このコードを実行したいと思います。

<?php echo print_image_function(); ?>

このコードには、カテゴリに属する​​画像も表示されます。最初の画像が消えたくない最初の画像にカーソルを合わせたときに、最初の画像の上に2番目の画像を表示したいだけです。

それが役立つかどうかはわかりませんが、私はWordpressを使用しており、PHPの専門家ではありません。これがうまくいくかどうかさえわかりません。だから私は誰かがこれを手伝ってくれるかどうか尋ねています。

前もって感謝します

みんな、ありがとう

私の投稿を読むのに時間を割いて、彼らの解決策を与えることによって私を助けてくれたすべての人に感謝したいと思います。こんなに速い時間でそんなに多くの答えを期待していませんでした。PHP、CSS、Javacriptで動作させるために数時間を費やした後、このWebサイトで次の質問に遭遇しました。ソリューション

それはまさに私が探していた場所であり、私のニーズに合うようにいくつかの変更を加えて、それを機能させることができました。あなたが難しい方法を探している間、時々物事はとても簡単になることがあります。したがって、同じ問題を抱えているすべての人のために：ここで素晴らしい人々によって与えられた解決策の1つを使用するか、上のリンクを見てください。

再度、感謝します！:)

4

5 に答える 5

9

これはCSSで行うことができます（必要に応じて、これがアーキテクチャ全体に適合します）。これは、：hover条件と：after疑似要素を使用した例です。
html

<a href="#" class="foo"><img src="http://www.gravatar.com/avatar/e5b801f3e9b405c4feb5a4461aff73c2?s=32&d=identicon&r=PG" /></a>​

css

.foo {
    position: relative;
}
.foo:hover:after {
    content: ' ';
    background-image: url(http://www.gravatar.com/avatar/ca536e1d909e8d58cba0fdb55be0c6c5?s=32&d=identicon&r=PG);
    position: absolute;
    top: 10px;
    left: 10px;
    height: 32px;
    width: 32px;   
}​

http://jsfiddle.net/rlemon/3kWhf/デモはこちら

編集：

新しいまたは実験的なCSS機能を使用する場合は、常に互換性チャートhttp://caniuse.com/を参照して、サポートされているブラウザーを使用していることを確認してください。たとえば、:afterIE8以降でのみサポートされます。

于 2012-07-10T15:24:15.977 に答える
4

クライアント側でサーバー側のコードをランダムに実行することはできません。

代わりにjavascriptAJAXリクエストを使用してみてください。

于 2012-07-10T15:12:03.467 に答える
1

PHPはサーバーサイド言語です。ページがロードされた後にPHPを実行させることはできません（ページがロードされる前にPHPが完全に解析を終了するため）。ホバーイベントが必要な場合は、JSが必要です。

于 2012-07-10T15:12:47.747 に答える
0

elseifまず、ステートメントは必要ありません。elseサムネイルもビデオ画像も存在しない空白のタグを使用する場合を除いて、は同じ目的を果たします。

<a href="<?php the_permalink(); ?>">
    <?php 
        if ( has_post_thumbnail() ) 
        {
            the_post_thumbnail();
        } 
        else
        {
            the_post_video_image();
        }
    ?>
</a>

クライアント側の機能にPHPを明示的に使用することはできません。オンホバー機能を提供するには、javascriptまたはjqueryを使用する必要があります。

Jqueryの例：

$(function() {

    $('a').hover(function() {

        // Code to execute whenever the <a> is hovered over

        // Example: Whenever THIS <a> tag is hovered over, display
        //          the hidden image that has a class of .rollover

        $(this + ' .rollover').fadeIn(300);

    }, function() {

        // Execute this code when the mouse exits the hover area
        // Example (inline with above example)

        $(this + ' .rollover').fadeOut(300);

    });

});

absolute画像を別の画像の上に配置するには、CSSが画像のポジショニングを使用し、ホバーで他の画像をオーバーレイするz-index画像に、その下に配置する画像よりも高い値が指定されていることを確認する必要があります。

お役に立てれば。

于 2012-07-10T15:23:20.143 に答える
-2

PHPはクライアントブラウザではなくサーバー側にあるため、これを機能させるにはJavaScriptやCSSが必要です。

于 2012-07-10T15:15:06.463 に答える