-1

I got a problem for hovering color in span classes. I was able to make two classes in this page, but in another classes a hover not effected. In this case, I just included into my test page, Please check it out, and let me know what is the wrong inside of my code ? Really i got confused, and I don't know how to solve it.

Please check this following like:

http://www.malayatourism.com/thisistest/testnowjobdoneperfectlyworkjobdone/index.php

As you can see, there are 7 subjects, just Main , Time and Gallery already effected to hover color, and another subjects not effected, however these subjects already effected by slides2.css", I mean, positions and colors, sizes, everything is ok, but just A HOVERING COLOR is not working

Can you please check it and if its possible tell me what is the wrong inside?

For your information , I have to use just SPAN, I can't use DIV OR SOMETHING ELSE.

Thanks in advance.

Regards

4

3 に答える 3

1

管理者がコメントで言ったように、マークアップがセレクターと一致しません。

例: クラス contactcaptionsmall を持つこのスパンがあります

<span class="number contactcaptionsmall">Contact </span>

ホバリング用のこのcssもあります

.contactcaptionsmall a:hover {text-decoration: none; color: black;}

<a>この行は、クラス contactcaptionsmall を持つ要素の内部にある場合にのみ一致します。

時間要素で行ったこととまったく同じ

<span class="timecaptionsmall"><a href="http://time.com/">Time</a></span>

<a>このCSSに適合するクラスtimecaptionsmallを持つスパン内の要素があります

.timecaptionsmall a:hover {text-decoration: none; color: yellow;}

2 つの選択肢があります。これをスタイルシートにします

.contactcaptionsmall:hover {color: black;}

または、これのスパンを変更します

<span class="number contactcaptionsmall"><a href="your link here">Contact</a></span>
于 2013-09-15T16:59:36.050 に答える
1

ブラウザのスタイルシート検査ツールを使用して、そのようなものをデバッグする必要があります。たとえば、「ギャラリー」リンクはホバーに反応しません。これは、マークアップと CSS ルールが単純に一致しないためです。マークアップは次のようになります。

<span class="l">
  <a style="galleryscaptionsmall" href="http://gallery.com/">
    <span class="circleContainer">
      <span class="vAligner">
        <p class="inner">
          <span class="importantValue">
            <span class="number"></span>
            <span class="galleryscaptionsmall">Gallery</span>
          </span>
        </p>
      </span>
  </a>
</span>

「style」が「 galleryscaptionsmall <a>」に設定されたタグは明らかに間違っています。それは「クラス」属性でなければなりません。スタイルルールがあります

.gallerycaptionsmall a:hover

しかし、そのマークアップのどれもそのセレクターに一致しません。たとえそうであったとしても、ルールは色を青にし、そのテキストはすでに青です。

于 2013-09-15T15:50:13.403 に答える
0

これはあなたのJavaScriptコードが原因です

<script type="text/javascript">
    $(document).ready(function ()
    {
        $('.maincaptionsmall').wrapInner('<a href="http://main.com/" style="maincaptionsmall"></a>');
        $('.timecaptionsmall').wrapInner('<a href="http://time.com/" style="timecaptionsmall"></a>');
        $('.l').wrapInner('<a href="http://gallery.com/" style="galleryscaptionsmall"></a>');
        $('.r').wrapInner('<a href="http://patient.com/" style="patientscaptionsmall"></a>');
        $('.cost').wrapInner('<a href="http://contact.com/" style="contactcaptionsmall"></a>');
        $('.lowerBound').wrapInner('<a href="http://address.com/" style="addresscaptionsmall"></a>');
        $('.conclusion').wrapInner('<a href="http://services.com/" style="servicescaptionsmall"></a>');
    });        
    </script>

最初の 2 行は、テキストを含むスパン内にアンカー タグを追加します。しかし、他の行はアンカータグを親コンテナに追加します（リダイレクトのために時間とメインのバブルのテキストをクリックする方法を参照してください。リダイレクトのために他のバブルのどこでもクリックできます）。あなたのスタイル

.timecaptionsmall a:hover {text-decoration: none; color: yellow;}

テキストの範囲内でアンカー タグを探します。これが守られると、ホバーが機能します（最初の2つのケースです）。それ以外の場合、テキストを含むスパンの内側にアンカー タグがないため、ホバーは機能しません。

于 2013-09-15T17:11:05.667 に答える