Question

//<![CDATA[
var blinkText = $(".highlight");

var interval = setInterval(function() {
  blinkText.toggleClass("highlightRed");
}, 500);
//]]>

.highlight {
  -webkit-transition: background 1.0s ease-in-out;
  -ms-transition: background 1.0s ease-in-out;
  transition: background 1.0s ease-in-out;
}
.highlightRed {
  color: red !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="highlight" style="font-weight: bolder; font-size: 33px; color: #00F">&rarr;</span>

JSFiddle:

上述代码应该根据给定的间隔使给定的箭头闪烁，但事实并非如此。如何使箭头相对于给定的间隔改变颜色？

Answer 1

您需要更改以下内容才能使代码正常运行。

将jQuery附加到您的网页。
在$(function() { ... });代码中使用您的JavaScript代码，以便在DOM
将内联样式移动到附加的样式表。
highlightRed类的样式应该在样式表中.highlight的样式之后。

注意：您的样式中无需使用!important。应该尽可能避免。

＆＃13;

$(function() {
  var blinkText = $(".highlight");

  var interval = setInterval(function () {
      blinkText.toggleClass("highlightRed");
  }, 500);
});

＆＃13;

.highlight {
    -webkit-transition: background 1.0s ease-in-out;
    -ms-transition: background 1.0s ease-in-out;
    transition: background 1.0s ease-in-out;
    font-weight: bolder;
    font-size: 33px;
    color: #00F;
}

.highlightRed {
    color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<span class="highlight">&rarr;</span>

＆＃13;

Answer 2

添加！重要的颜色：红色：

.highlightRed {
    color: red !important;
}

OR

如果您不想使用！重要，因为！重要的ID不是一个好的做法，只需这样做：

1）从span中删除内联css并将该样式添加到名为custom的任何类中：

<span class="highlight custom">&rarr;</span>

.custom {
   font-weight: bolder; font-size: 33px; color: #00F;
}

2）定义highlightRed css类，如下所示：

span.highlightRed {
    color: red;
}

Answer 3

＆＃13;

.highlightRed {
    color: red !important;
}

＆＃13;

使用JavaScript突出显示文本颜色

3 个答案: