3

画像にカーソルを合わせると、その横にあるテキストリンクのホバープロパティも呼び出せるようにしたいと思います。

ビデオの画像プレビューとその横にテキスト文字列として書かれたビデオ名があります。明らかな検索と使いやすさの理由から、画像にカーソルを合わせても、画像とテキストをすべて1つの画像にすることなく、ホバー効果のようにテキストの色を変更できるようにしたいと思います。テキストをテキストとして保持するなど。

更新：また、現在「スパン」にあるテキストリンクが、「margin-left」を使用して移動できるだけでなく、上に表示できることを確認したいと思います。デフォルトでは、コードでは60x60pxの画像の下部のレベルまでドロップします。私はそれをより高くしたいので見栄えがしますが、「マージンボトム」はそれを助けません。60x60imgの「中心の高さ」に配置したい...デフォルトで配置される下部ではありません。

何か案は？ありがとう！

ps私はここに投稿されたjavaスクリプトとjqueryのアイデアを受け入れていますが、私は完全な初心者であり、追加の説明が必要になります。私はCSSが好きです。

私のコードは次のとおりです。

私のhtmlは： 

<div id="example">
  <a href="#">
    <img src="image/source_60x60px.jpg">
    <span class="video_text">Image Text</span>
  </a>
</div>

私のCSSは：

div#example         { float:left; width:358px; height:60px; margin-top:20px; }   
div#example a       { color:#B9B9B9; width:100%;}  
div#example a:hover { color:#67a; text-decoration:none;}  
span.videotext      { margin-left:80px;}
4

4 に答える 4

3

どうですか

<style>
a 
{ 
    color: #000000; 
}
a:hover 
{ 
    color: #a9a9a9; 
}
</style>

<a href="#"><img src="imagepath" alt="Image Title" />&nbsp;Image Text</a>
于 2009-09-10T11:07:00.630 に答える
3

これは、CSSまたはJavascriptを使用して行うことができます。マークアップと要素のレイアウトを知らなければ、どのオプションが最適かを判断することはできません。

CSSオプション

a:hover span { color:red; }
<a href="1.html">
  <img src="1.jpg" />
  <span>Title: One</span>
</a>

この例では、テキストと画像の両方がリンク内にあります。次に、：hoverイベントのテキストの色を変更します。

Javascript（jQuery）

div.hovered p { color:red; }

<div class="preview">
  <img src="1.jpg" />
  <p>Title: One</p>
</div>

$("div.preview img").hover(
  function () { $(this).parent().addClass("hovered"); },
  function () { $(this).parent().removeClass("hovered"); }
);

この例は、親コンテナーにクラスを追加するだけのソリューションを示しています。これにより、タイトルの表現が変更されます。このイベントは、コンテナ内の画像にカーソルを合わせると制御されます。

アップデート：

テキストの配置はそれほど難しくありません。すばやく簡単な方法は、親コンテナを相対で配置し、テキストを絶対で配置することです。

<div class="container">
  <a href="#">
    <img src="1.jpg" />
    <span class="title">Hello World</span>
  </a>
</div>

div.container            { position:relative; width:150px; }
div.container span.title { position:absolute; top:0; left:50px; width:100px; }

これは簡単な例です。必要に応じて値を変更できます。

于 2009-09-10T11:08:12.313 に答える
0

ジョナサンの答えに基づいていますが、jQueryを使用しない場合のjavascriptの場合:

<div onmousemove="hover('text1',true)" onmouseout="hover('text1',false)" >
  <img src="1.jpg" />
  <p id="text1">Title: One</p>
</div>

<script type="text/javascript">
function hover(elemID, on){
  element = document.getElementById(elemID);  
  if(on){
    element.style.color='red';
  }
  else
  {
    element.style.color='black';
  }
}
</script>
于 2009-09-10T11:39:12.427 に答える
0

謝罪いたします。私はあなたの質問を読み違えました。ここに別の刺し傷があります：

HTML

<div class="video">
    <a href="" title="title">
        <img alt="title" src="path/to/image" />
        Video Title
    </a>
</div>

CSS

    .video {
        line-height: 75px;
        margin: 10px;
        padding: 10px;
        width: 200px;   
    }
    .video img {
        float: left;
        margin-right: 15px; 
    }
    .video a:hover {
        color: #hexcol; 
    }
    .video:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden; 
    }

明らかに、ここには必要のないスタイルがいくつかありますが、ブラウザーでテストするためにそれらを使用しました。テキストを動画のサムネイルと垂直方向に揃えたい場合は、line-height プロパティをサムネイル画像と同じ高さに設定する必要があります。これにより、テキストがビデオの中央に押し出されます。

于 2009-09-11T01:59:19.743 に答える