Question

我希望带边框的链接在点击时将背景颜色更改为蓝色。我希望它在点击后保持新的背景颜色。

这是我的代码： HTML：

<nav class="entry-links">
                    <ul>
                        <li class="focus first">
                            <a href="#" title="För elever">För elever</a>
                        </li>
                        <li class="focus last">
                            <a href="#" title="För skolpersonal">För skolpersonal</a>
                        </li>
                        <li class="focus first">
                            <a href="#" title="Ungdom och elevdatabas">Ungdom och elevdatabas</a>
                        </li>
                    </ul>
                </nav>

CSS：

.entry-links > ul li a,
.entry-links > ul li span
{
    cursor: pointer;
    display: inline-block;
    padding: 10px;
    padding-top: 5px;
    font-size: 15px;
    font-weight: 500;
    color: #000000;
    border: 1px solid;
    border-radius: 10px;
}

这就是他们现在的样子： http://jsfiddle.net/TxbVt/1524/

选择后，我希望他们将背景颜色更改为： http://jsfiddle.net/kq3ja99r/

Answer 1

您可以尝试调整 id acc。到 href -

.entry-links > ul li a,
.entry-links > ul li span
{
    cursor: pointer;
    display: inline-block;
    padding: 10px;
    padding-top: 5px;
    font-size: 15px;
    font-weight: 500;
    color: #000000;
    border: 1px solid;
    border-radius: 10px;
}

.entry-links > ul li a:target,
.entry-links > ul li span:target {
  color: blue;
}

<nav class="entry-links">
                    <ul>
                        <li class="focus first">
                            <a href='#a' id='a' title="För elever">För elever</a>
                        </li>
                        <li class="focus last">
                            <a href="#b" id='b' title="För skolpersonal">För skolpersonal</a>
                        </li>
                        <li class="focus first">
                            <a href="#c" id='c' title="Ungdom och elevdatabas">Ungdom och elevdatabas</a>
                        </li>
                    </ul>

Answer 2

如果要在点击后保留更改，则必须使用JavaScript：
JS：

＆＃13;

var link = document.getElementsByClassName("entry-links")[0].getElementsByTagName("a");
for(var i =0; i < link.length;i++){
  link[i].onclick = function(){
    this.classList.add("highlight");
    }
}

＆＃13;

.entry-links > ul li a,
.entry-links > ul li span
{
    cursor: pointer;
    display: inline-block;
    padding: 10px;
    padding-top: 5px;
    font-size: 15px;
    font-weight: 500;
    color: #000000;
    border: 1px solid;
    border-radius: 10px;
}
.entry-links > ul li a.highlight{
      border: 2px solid #a1a1a1;
  padding: 10px 40px; 
  background: blue;
  width: 300px;
  border-radius: 25px;
}

＆＃13;

<nav class="entry-links">
                    <ul>
                        <li class="focus first">
                            <a href="#" title="För elever">För elever</a>
                        </li>
                        <li class="focus last">
                            <a href="#" title="För skolpersonal">För skolpersonal</a>
                        </li>
                        <li class="focus first">
                            <a href="#" title="Ungdom och elevdatabas">Ungdom och elevdatabas</a>
                        </li>
                    </ul>

＆＃13;

Answer 3

你可以这样做 - 使用相邻的css选择器：

<button class="btn">button</button>
<div class="content"></div>

btn:active + .content{
    background: blue;
}

http://jsfiddle.net/etsvsb4o/

使用：focus伪类

{
 background-color:yellow;
}

http://jsfiddle.net/7RASJ/

选中时更改背景颜色

3 个答案: