我的css代码有问题,我希望列表项在点击后保持不变。这是我的CSS。
.exploreheadings{
border-bottom: 1px solid black;
display: inline-block;
width: 350px;
padding-bottom: 3px;
display: inline;
list-style-type: none;
font-size: 30px;
-webkit-transition: font-size .7s;
transition: font-size .7s;
}
.exploreheadings:hover{
font-size: 50px;
}
.exploreheadings:active{
font-size: 50px;
}
.exploreheadings:visited{
font-size: 50px;
}
这是我的HTML
<ul>
<li class="exploreheadings">people</li>
<li class="exploreheadings">hashtags</li>
<li class="exploreheadings">businesses</li>
</ul>
有什么办法可以让我保持不变,我将鼠标悬停在它上面然后点击它,我尝试了被访问的选择器,但无济于事。我是编程世界的半新人,所以这可能是一个愚蠢的错误,但任何人都可以帮忙吗?我也很习惯使用jQuery,所以如果那就是它必须的,我很好。
答案 0 :(得分:0)
如果没有太多上下文,请尝试以下代码。它会持续你的视觉状态:
<ul>
<li class="exploreheadings" onclick="setactive(this);">people</li>
<li class="exploreheadings" onclick="setactive(this);">hashtags</li>
<li class="exploreheadings" onclick="setactive(this);">businesses</li>
</ul>
<script>
function setactive(d){
var os=d.parentNode.getElementsByTagName('li');
for (var i=0;i<os.length;i++){
var o=os[i];
o.style.fontSize='30px';
}
d.style.fontSize='50px';
}
</script>
答案 1 :(得分:0)
如果我没有错,你实际上从元素上方移除了鼠标后,它确实撤回了:悬停效果...... 尝试删除:active和:visited
答案 2 :(得分:0)
如果使用jQuery是一个选项,则以下设置font-size并删除转换:
$(".exploreheadings").click(function () {
$(this).css({
"transition": "none",
"font-size": "50px"
});
});
.exploreheadings {
border-bottom: 1px solid black;
display: inline-block;
width: 350px;
padding-bottom: 3px;
display: inline;
list-style-type: none;
font-size: 30px;
-webkit-transition: font-size .7s;
transition: font-size .7s;
}
.exploreheadings:hover {
font-size: 50px;
}
.exploreheadings:active {
font-size: 50px;
}
.exploreheadings:visited {
font-size: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li class="exploreheadings">people</li>
<li class="exploreheadings">hashtags</li>
<li class="exploreheadings">businesses</li>
</ul>
更新:在点击另一个li后,将其他li元素更改回30px字体大小,按照toggleClass()
方法和另一个类active
进行复制类exploreheadings
,调整后的字体大小为50px,没有转换:
$(document).ready(function () {
$("li").click(function () {
$("li.active").toggleClass("exploreheadings active");
$(this).toggleClass("exploreheadings active");
});
});
.exploreheadings {
border-bottom: 1px solid black;
display: inline-block;
width: 350px;
padding-bottom: 3px;
display: inline;
list-style-type: none;
font-size: 30px;
-webkit-transition: font-size .7s;
transition: font-size .7s;
}
.active {
border-bottom: 1px solid black;
display: inline-block;
width: 350px;
padding-bottom: 3px;
display: inline;
list-style-type: none;
font-size: 50px;
}
.exploreheadings:hover {
font-size: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li class="exploreheadings">people</li>
<li class="exploreheadings">hashtags</li>
<li class="exploreheadings">businesses</li>
</ul>
答案 3 :(得分:0)
您正在使用的两个伪类(:active和:visited)仅适用于a
个元素。
将以下a
元素添加到HTML中,如下所示:
<ul>
<li class="exploreheadings"><a href="#">people</a></li>
<li class="exploreheadings"><a href="#">hashtags</a></li>
<li class="exploreheadings"><a href="#">businesses</a></li>
</ul>
然后将CSS更改为a
元素上的样式链接状态,而不是li
元素:
.exploreheadings a:hover {
font-size: 50px;
}
.exploreheadings a:active {
font-size: 50px;
}
.exploreheadings a:visited {
font-size: 50px;
}
**编辑澄清虽然:hover
与其他元素一起使用,:active
和:visited
仅适用于a
元素。