imgリンクとtextリンクの両方を同じ場所にリンクし、どちらをホバーしているのかに関係なくホバーでアクティブにするにはどうすればよいですか？

StackOverflow https://stackoverflow.com/questions/1404616

  •  05-07-2019
  •  | 
  •  

質問

画像にカーソルを合わせて、その隣にあるテキストリンクのhoverプロパティを呼び出すことができるようにしたいと思います。

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

UPDATE：また、現在＆quot; span＆quot;にあるテキストリンクを確認したい＆quot; margin-left＆quot;を使用して単に移動することはできません。上げることができます。デフォルトでは、私はそれを60x60px画像の一番下のレベルに落としています。見た目は良いが、「余白」はもっと高くしたいそれは助けにはなりません。 「中心の高さ」にしたい60x60 imgの...既定では、その下部にはありません。

いろんなアイデア？ありがとう！

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

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

my 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;}
役に立ちましたか？

解決

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; }

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

他のヒント

はどうですか

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

<a href="#"><img src="imagepath" alt="Image Title" />&nbsp;Image Text</a>

Jonathanの回答に基づきますが、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>

おaび申し上げます。私はあなたの質問を読み違えました。ここに別の突き刺しがあります：

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プロパティをサムネイル画像と同じ高さに設定する必要があります。これにより、テキストがビデオの中央にプッシュされます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top