Question

我在span类中悬停颜色时出现问题。我能够在这个页面中创建两个类，但在另一个类悬停中没有受到影响。在这种情况下，我刚刚进入我的测试页面，请检查出来，让我知道我的代码内部有什么问题？真的我很困惑，我不知道如何解决它。

请检查以下内容：

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

正如您所看到的，有7个主题，只有主要，时间和图库已经影响到悬停颜色，而另一个主题没有受影响，但是这些主题已经受到 slides2.css“的影响，我的意思是，位置和颜色，尺寸，一切都还可以，但只是 一个HOVERING COLOR无效

请你检查一下，是否有可能告诉我里面有什么不对？

为了您的信息，我必须使用SPAN，我不能使用DIV或SOMETHING ELSE。

提前致谢。

此致

Answer 1

您只需要使用浏览器的样式表检查工具来调试这些内容。例如，“Gallery”链接不响应悬停，因为标记和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

但该标记都不匹配该选择器。即使这样做，规则也会使颜色变为蓝色，并且该文本已经蓝色。

Answer 2

就像管理员在评论中所说，你的标记与你的选择器不匹配。

实施例：你有这个跨度有类contactcaptionsmall

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

你也有这个用于悬停的css

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

只有在具有类contactcaptionsmall的元素中有<a>时，此行才会匹配。

您使用时间元素完成了什么

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

跨度内有一个<a>元素，其中classcapcaptionsmall适合此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>

Answer 3

这是因为你的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;}

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

在html和css中为span添加悬停颜色？

3 个答案: