Question

我正在开发一个包含各个部分的网站，每个部分都有悬停效果。我希望在单击您想要的部分后保持悬停效果处于活动状态。

有人可以告诉我如何实现这个目标吗？

CSS：

.btncstm:hover {
   background: #C01527;
   text-decoration: none;
   color:#FFFFFF;
}

HTML：

<a href="[section1_link]" class="btncstm">Section1</a>
<a href="[section2_link]" class="btncstm">Section2</a>
<a href="[sectionN_link]" class="btncstm">SectionN</a>

Answer 1

放

.btncstm:visited { background: #C01527; text-decoration: none; color:#FFFFFF; }

之后立即

.btncstm:hover { background: #C01527; text-decoration: none; color:#FFFFFF; }

或者，您可以使用以下内容：

.btncstm:hover, .btncstm:visited { background: #C01527; text-decoration: none; color:#FFFFFF; }

Answer 2

您可以使用JavaScript实现您正在寻找的行为 - 遗憾的是，单靠CSS并不足以实现这一目标。这个特殊的解决方案使用了jQuery。

使用悬停样式创建一个类.active：

.btncstm.active {
   background: #C01527;
   text-decoration: none;
   color:#FFFFFF;
}

使用JavaScript（在本例中使用jQuery）查找相应的导航链接并将.active类附加到其中：

$(document).ready( function() {
    // Get page URL by breaking down window.location
    var page = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);

    // Search through each link, compare href to current page
    $("a.btncstm").each( function(){
        if( $(this).attr("href") == page || $(this).attr("href") == "" )
        $(this).addClass("active");
    })
});

这里是一个link to the page我从中调整了解决方案 - 您可能会发现它很有帮助，因为它更详细地讨论了这些组件。希望这可以帮助！如果您有任何问题，请告诉我。

Answer 3

---- 编辑 ----

如果链接是单独的页面，而不是单个页面上的部分，PHP是另一种创建菜单的方法，该菜单“知道”您所在的页面。有很多可能的方法可以实现这一点，但是这里有一个例子，如果当前URL与链接匹配，则会在菜单项中添加.active类（这通常要求您的文件以.php结尾）：

<a href="[section1_link]" class="btncstm<?php echo ($_SERVER['PHP_SELF'] == '/section1.php' ? ' active' : '');?>">Section1</a>
<a href="[section2_link]" class="btncstm<?php echo ($_SERVER['PHP_SELF'] == '/section2.php' ? ' active' : '');?>">Section2</a>
<a href="[sectionN_link]" class="btncstm<?php echo ($_SERVER['PHP_SELF'] == '/sectionN.php' ? ' active' : '');?>">SectionN</a>

---- 结束编辑 ----

添加一些jQuery魔术来实现这个目标：

<强> HTML

<a href="#" class="btncstm">Section1</a> 
<a href="#" class="btncstm">Section2</a> 
<a href="#" class="btncstm">SectionN</a>

<强> CSS

.btncstm:hover, .active {
   background: #C01527;
   text-decoration: none;
   color:#FFFFFF;
}

<强>的jQuery

$('.btncstm').on('click', function () {
    $('.btncstm').removeClass('active');
    $(this).addClass('active');
});

在此处试试：http://jsfiddle.net/YdGu7/

在该部分链接上建立链接时保持CSS悬停效果

3 个答案: