CSS/HTML - ホバーに浮遊するダッシュが表示される

Question

商品パートナーのロゴを含むサイトにセクションがあります。約28個のロゴがあります。そのうち10個は別の製品ページへのリンクです。私がそれらの上にマウスを置いたとき、右下に現れている迷いがあり、どこから来ているのか分かりません。それが私を狂ってしまいます。それは最後のものを除いてすべてのリンクされたロゴ画像に現われます - もう一度私はこのものとの違いを見ることができません。これは私が何を意味するかである -

を登場ダッシュ

ロゴダッシュ

がなければそれはコードのページから浮遊ダッシュのように見えますが、何も見えない -

partners.php

<div class="row"> 
    <div id="partnerimages" class="col-md"> 
    <a href="<?php the_permalink(76); ?>" id="adia"> 
     <?php if(get_field('axe_img')): ?> 
     <img src="<?php the_field('axe_img'); ?>" /> 
     <?php endif; ?> 
    </a> 
    <?php if(get_field('beachrotana_img')): ?> 
    <img src="<?php the_field('beachrotana_img'); ?>" /> 
    <?php endif; ?> 
    <a href="<?php the_permalink(78); ?>" id="adia"> 
     <?php if(get_field('bloom_img')): ?> 
     <img src="<?php the_field('bloom_img'); ?>" /> 
     <?php endif; ?> 
    </a> 
    <a href="<?php the_permalink(80); ?>" id="adia"> 
     <?php if(get_field('bodytree_img')): ?> 
     <img src="<?php the_field('bodytree_img'); ?>" /> 
     <?php endif; ?> 
    </a> 
    <a href="<?php the_permalink(82); ?>" id="adia"> 
     <?php if(get_field('certo_img')): ?> 
     <img src="<?php the_field('certo_img'); ?>" /> 
     <?php endif; ?> 
    </a> 
    <?php if(get_field('daphne_img')): ?> 
    <img src="<?php the_field('daphne_img'); ?>" /> 
    <?php endif; ?> 
    <?php if(get_field('ecolab_img')): ?> 
    <img src="<?php the_field('ecolab_img'); ?>" /> 
    <?php endif; ?> 
    <a href="<?php the_permalink(84); ?>" id="adia"> 
     <?php if(get_field('fish_img')): ?> 
     <img src="<?php the_field('fish_img'); ?>" /> 
     <?php endif; ?> 
    </a> 
    <?php if(get_field('fsw_img')): ?> 
    <img src="<?php the_field('fsw_img'); ?>" /> 
    <?php endif; ?> 
    <?php if(get_field('gloss_img')): ?> 
    <img src="<?php the_field('gloss_img'); ?>" /> 
    <?php endif; ?> 
    <a href="<?php the_permalink(86); ?>" id="adia"> 
     <?php if(get_field('guy_img')): ?> 
     <img src="<?php the_field('guy_img'); ?>" /> 
     <?php endif; ?> 
    </a> 
    <?php if(get_field('happiness_img')): ?> 
    <img src="<?php the_field('happiness_img'); ?>" /> 
    <?php endif; ?> 
    <?php if(get_field('herbal_img')): ?> 
    <img src="<?php the_field('herbal_img'); ?>" /> 
    <?php endif; ?> 
    <?php if(get_field('ignite_img')): ?> 
    <img src="<?php the_field('ignite_img'); ?>" /> 
    <?php endif; ?> 
    <?php if(get_field('js_img')): ?> 
    <img src="<?php the_field('js_img'); ?>" /> 
    <?php endif; ?> 
    <?php if(get_field('khalidya_img')): ?> 
    <img src="<?php the_field('khalidya_img'); ?>" /> 
    <?php endif; ?> 
    <a href="<?php the_permalink(88); ?>" id="adia"> 
     <?php if(get_field('lucky_img')): ?> 
     <img src="<?php the_field('lucky_img'); ?>" /> 
     <?php endif; ?> 
    </a> 
    <a href="<?php the_permalink(90); ?>" id="adia"> 
     <?php if(get_field('lux_img')): ?> 
     <img src="<?php the_field('lux_img'); ?>" /> 
     <?php endif; ?> 
    </a> 
    <?php if(get_field('madiso_img')): ?> 
    <img src="<?php the_field('madiso_img'); ?>" /> 
    <?php endif; ?> 
    <?php if(get_field('maria_img')): ?> 
    <img src="<?php the_field('maria_img'); ?>" /> 
    <?php endif; ?> 
    <?php if(get_field('prca_img')): ?> 
    <img src="<?php the_field('prca_img'); ?>" /> 
    <?php endif; ?> 
    <?php if(get_field('qcomm_img')): ?> 
    <img src="<?php the_field('qcomm_img'); ?>" /> 
    <?php endif; ?> 
    <?php if(get_field('radwater_img')): ?> 
    <img src="<?php the_field('radwater_img'); ?>" /> 
    <?php endif; ?> 
    <?php if(get_field('radmedia_img')): ?> 
    <img src="<?php the_field('radmedia_img'); ?>" /> 
    <?php endif; ?> 
    <a href="<?php the_permalink(92); ?>" id="adia"> 
     <?php if(get_field('shangri_img')): ?> 
     <img src="<?php the_field('shangri_img'); ?>" /> 
     <?php endif; ?> 
    </a> 
    <?php if(get_field('sofrank_img')): ?> 
    <img src="<?php the_field('sofrank_img'); ?>" /> 
    <?php endif; ?> 
    <a href="<?php the_permalink(94); ?>" id="adia"> 
     <?php if(get_field('tips_img')): ?> 
     <img src="<?php the_field('tips_img'); ?>" /> 
     <?php endif; ?> 
    </a> 
    <a href="<?php the_permalink(96); ?>" id="adia"> 
     <?php if(get_field('xbd_img')): ?> 
     <img src="<?php the_field('xbd_img'); ?>" /> 
     <?php endif; ?> 
    </a> 
    </div> 
</div> 

、それは他のテキストエディタからでなければ、それは可能でしょうか？私はページとACFをチェックしました。私はできないことを誰かが助けて/見ることができますか？

Answer 1

HTMLでは、空白は「正規化」されています。つまり、行内の複数の空白文字が1つの空白文字に圧縮されます。しかし、それはまた、印刷できない他の文字が改行文字を含む空白文字に変換されることを意味します。だから、

、あなたはこのようにハイパーリンクを作成する場合：あり

<a href="somePath">Some content</a> 

下線が適用される場合a要素の内容だけをテキストとそのテキストの全ては、クリック可能になりますものですとされ、すべてのテキストに下線が引かれます。

しかし、あなたのケースでは、あなたのコードは基本的に、このようになるように動作：

開閉 a要素内に改行を入れて、そのキャリッジリターンがスペースとその空間に変換される

<a href="somePath"> 
    <img src="somePath"></a> 

要素の内容の一部になりました。下線が適用されると、そのスペースに下線が引かれます。

だから、あなたは自分のコード内の改行を含まないように、あなたのHTMLの構造を再作業することができます。また、以下のCSSとのリンクのためにアンダーラインオフにすることができます：これは確かに問題を解決します

a { text-decoration:none; } 

Answer 2

：

#partnerimages a:hover {text-decoration:none!important;} 

ダッシュではなく下線が表示されています。