简单的css仅在锚点上应用背景颜色

时间:2016-08-24 18:33:44

标签: html css

我想将背景颜色仅应用于我的锚标签而不是字体图标。我嵌套了< span>因为我需要图标也可以点击。

如果我把那个跨度fa-fa-angle-down类放在锚点之外,一切看起来都不错(这就是我想要的),但它不可点击。

{{1}}


{{1}}

https://jsfiddle.net/c2Ln1cab/1/

3 个答案:

答案 0 :(得分:2)

为什么不只是为你想要的渐变添加一个跨度,然后你可以在锚内部都有?



span {
  margin: 0;
  margin-left: 10px;
  padding: 0;
}

.http_method a {
  height: 25px;
  line-height: 10px;
  vertical-align: middle;
}
.http_method a span.gradient{
  background: linear-gradient(#4c99d7, #1a66a3);
  border: 1px solid #1a66a3;
}
.http_method span {
  font-size: 30px;
  margin-right: 10px;
  padding-left: 10px;
  vertical-align: middle;
  color: #686b6d;
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">


<span class='http_method'>
 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">


<span class='http_method'>
 
<a href='test' class="toggleOperation"> 
<span class="fa fa-angle-down"></span><span class="gradient">method</span>
</a>
</span>

</span>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

不要给出锚标记,样式,而是考虑创建具有该样式的新类,并在需要的地方应用该类。

这样,您不依赖于标记,也不会限制带有样式(CSS)的构造(HTML)。

    Sub ConditionalDisplay ()
    BeginRow = 1
    EndRow = 50

    For RowCnt = BeginRow to EndRow

    IF Cells(RowCnt, CheckColumn).Value = "Days" THEN
       Rows("6:8").EntireRow.Hidden = TRUE
    ELSE
        Rows("6:8").EntireRow.Hidden = FALSE
    END IF

    Next RowCnt
    End Sub
Console.WriteLine(fieldInfo.GetValue(n));

https://jsfiddle.net/c2Ln1cab/4/

答案 2 :(得分:0)

只需将跨度放在锚点内,它们就可以从那里开始工作:

示例:

HTML:

lazy loaded

的CSS:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<a href='test' class="toggleOperation">

 <span class="fa fa-angle-down"></span><span class="span-colored">method</span>

</a>

https://jsfiddle.net/c2Ln1cab/5/