-1

我在跨度类中悬停颜色时遇到问题。我能够在此页面中创建两个类，但在另一个类中，悬停没有影响。在这种情况下，我只是包含在我的测试页面中，请检查一下，让我知道我的代码里面有什么问题？我真的很困惑，我不知道如何解决它。

请检查以下内容：

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

如您所见，有 7 个主题，只有Main，Time和Gallery已经影响悬停颜色，而另一个主题没有影响，但是这些主题已经受到slides2.css"的影响，我的意思是，位置和颜色，大小，一切都是好的，但只是A HOVERING COLOR 不起作用

你能检查一下吗，如果可能的话，告诉我里面有什么问题吗？

为了您的信息，我必须使用 SPAN，我不能使用 DIV 或其他东西。

提前致谢。

问候

4

3 回答 3

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 回答
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>元素，其类 timecaptionsmall 适合此 css

.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 回答
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>

您的前两行在包含文本的范围内添加了锚标记。但是其他行将锚标记添加到父容器（请参阅如何单击时间和主气泡中的文本进行重定向，但您可以单击气泡上的任意位置以进行重定向）。你的风格

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

在文本范围内查找锚标记。当坚持这一点时，您的悬停工作（这是前两种情况）。对于其他情况，由于跨度内部没有包含文本的锚标记，因此悬停不起作用。

于 2013-09-15T17:11:05.667 回答