CSS Sprites由于PHP statementcommentary而恢复为：hover事件 [英] CSS Sprites are reverting to a:hover event due to PHP statementcommentary

问题描述

我使用CSS sprites为我的wordpress导航，为了让他们工作，我需要使用php显示告诉当前页面的部分。

I'm using CSS sprites for my wordpress navigation, and in order to get them to work I needed to use a php to show tell the current page for the section.

CSS：

#sidebarnav ul#sidenav li.visionside a {width:204px; height:53px; background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/vision2.png)  0px 0}
#sidebarnav ul#sidenav li.visionside a:hover {background-position:0px -53px}


#sidebarnav ul#sidenav li.teamside a {width:204px; height:53px; background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/team2.png)  0px 0}
#sidebarnav ul#sidenav li.teamside a:hover {background-position:0px -53px}


#sidebarnav ul#sidenav li.mtlside a {width:204px; height:53px; background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/mtl2.png)  0px 0}
#sidebarnav ul#sidenav li.mtlside a:hover {background-position:0px -53px}


#sidebarnav ul#sidenav li.blogside a {width:204px; height:53px; background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/content2.png)  0px 0}
#sidebarnav ul#sidenav li.blogside a:hover {background-position:0px -53px}


#sidebarnav ul#sidenav li.orgside a {width:204px; height:53px; background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/org2.png)  0px 0}
#sidebarnav ul#sidenav li.orgside a:hover {background-position:0px -53px}

要由PHP触发的标题中的CSS：

The CSS in the Header to be triggered by the PHP:

#sidebarnav ul#sidenav li.<?php echo $current1; ?> {
    background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/vision2.png)  0px -106px;
}

#sidebarnav ul#sidenav li.<?php echo $current2; ?> {
    background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/team2.png)  0px -106px;
}

#sidebarnav ul#sidenav li.<?php echo $current3; ?> {
    background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/content2.png)  0px -106px;
}

#sidebarnav ul#sidenav li.<?php echo $current4; ?> {
    background:url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/org2.png)  0px -106px;
}

PHP：

 <?php
  if ( is_page('vision') ) { $current1 = 'visionside a'; }
  elseif  ( is_page('team') ) { $current2 = 'teamside a'; }
  elseif  ( is_page('commentary') ) { $current3 = 'blogside a'; }
  elseif  ( is_page('organizations') ) { $current4 = 'orgside a'; }
 ?>

但是当用户将鼠标悬停在导航上时，项目显示悬停状态，而不是活动状态应该。

But when the user hovers over the navigation the item shows the hover state, NOT the active state as it should.

网址： http://jumpthru.net/ newsite / vision /

推荐答案

我同意主要是什么@thirtydot说，因为有一个更容易的WP方式添加一个类到一个活跃的链接..但要遵循你的逻辑，你可以使整个事情更简单。

I agree mostly with what @thirtydot says as there's probably an easier WP way to add a class to an active link.. but to follow your logic you can make the whole thing much simpler.

首先CSS。虽然我从你的页面文件中多了一点，你可以删除一大堆那些重复的声明，所以每个特定链接需要的唯一的东西是背景图像..原始大小，背景位置等不改变所以这样的东西更容易阅读：

First the CSS. though I did copy a bit more from your page file, you can remove a whole lot of those repeated declarations, so that the only thing each specific link needs is the background-image.. the original size, background-position etc does not change so something like this makes it easier to read:

#sidenav {
    width:204px; 
    list-style:none; 
    margin:0;
    padding: 0;
    padding-bottom:40px;
    float:left;
}

#sidenav li {
    float:left;
    width: 100%; 
}

#sidenav li a {
    display: block;
    height:53px;
    background-repeat: no-repeat;
    background-position: 0 0;
    text-indent: -9999px;
}

#sidenav li a:hover {
    background-position: 0 -53px;
}

#sidenav li.visionside a {background-image : url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/vision2.png);}
#sidenav li.teamside a {background-image : url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/team2.png);}
#sidenav li.mtlside a {background-image : url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/mtl2.png);}
#sidenav li.blogside a {background-image: url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/content2.png);}
#sidenav li.orgside a {background-image: url(http://jumpthru.net/newsite/wp-content/themes/twentyten/images/side/org2.png);}

现在您的活动状态只需要一个相关链接，将 background-position 更改为 0 -106px - 无需再次重新声明图片

now your "active" state only needs the one relevant link to have it's background-position changed to 0 -106px - no need to re-declare the image again

所以你的PHP逻辑可能是这个（可能更简单）我想使用你有什么：

so your PHP logic could be this (possibly even simpler) but I'm trying to use what you have:

 <?php
  if ( is_page('vision') ) { $current = 'visionside'; }
  elseif  ( is_page('team') ) { $current = 'teamside'; }
  elseif  ( is_page('???') ) { $current = 'mtlside'; }
  elseif  ( is_page('commentary') ) { $current = 'blogside'; }
  elseif  ( is_page('organizations') ) { $current = 'orgside'; }
 ?>

注意：使用相同的变量（问号需要替换为mtlside链接）然后< head> 样式中的行才需要读取：

Note: the same variable is used (and question marks would need replacing for your mtlside link).. and then the line in the <head> styles only then need read:

#sidenav li.<?php echo $current ?> a {
    background-position: 0px -106px;
}

这样，它只会是一个链接， 活动页面背景位置。

That way it will only be the one link which is getting more specific showing the "active page" background-position.

我不知道你实际想要的是什么，但是 a：hover 覆盖新的活动选择器，因为上面的< head> 样式中的规则更具体，如果你实际上希望活动链接显示相同的：hover 状态，你需要使样式表中的 a：hover 规则更具体，你可以这样做： / p>

I'm not sure what you actually want your hover to do, but the a:hover rule will not override the new "active" selector because the rule in the <head> styles above is more specific, if you actually want the the active link to show the same :hover state as normal you need to make the a:hover rule in the stylesheet more specific which you can do like this:

#sidebarnav #sidenav li a:hover {
    background-position: 0 -53px;
}

注意，我删除了双重 ID 从样式表选择器，因为没有他们需要，一个ID是唯一足够...但是然后你可以使用第二个ID（#sidebarnav）如果需要，使最后的规则称量更多如果特异性然后需要。

note I removed the double ID 's from the stylesheet selectors as there is no need for them, one ID is unique enough.. but then you can use the second ID (#sidebarnav) if required to make that last rule "weigh" more if specificity is then required.

这篇关于CSS Sprites由于PHP statementcommentary而恢复为：hover事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！