Question

我现在正在网站上工作，并且第一次冒险进入CSS Sprites。在a：活跃状态我正在根据需要移动背景位置，这很有效。但是，如果我点击链接并将鼠标移开链接，同时仍然点击中间。即使在我发布点击后，效果也会保留在按钮上！

是否存在类似于iPhone操作“TouchUpInside”的CSS规则，因此仅当用户在链接区域中释放点击时才会受到影响？

Answer 1

不知道这是否是您正在寻找的内容，但是查看我的网站菜单时a:active设置会在您访问该网页时启用它，如果您希望在有人将鼠标悬停在该网页上时进行更改a:hover

尝试这样的事情

ul.cssmenu li a {
    display: block;
    width: 150px;
    height: 50px;
    background:url(images/bg%27s/menu.png);
    }

/*
*   Normal Links
*/
ul.cssmenu li.home a {
    background-position: 0 -3px;
    }

ul.cssmenu li.photos a {
    background-position: -150px -3px;
    }

ul.cssmenu li.racing a {
    background-position: -300px -3px;
    }
    ul.cssmenu li.blog a {
    background-position: -450px -3px;
    }

ul.cssmenu li.forum a {
    background-position: -600px -3px;
    }

ul.cssmenu li.contact a {
    background-position: -750px -3px;
    }

/*
*   Hover Links
*/
ul.cssmenu li.home a:hover {
    background-position: 0 -54px;
    }

ul.cssmenu li.photos a:hover {
    background-position: -150px -54px;
    }

ul.cssmenu li.racing a:hover {
    background-position: -300px -54px;
    }
ul.cssmenu li.blog a:hover {
    background-position: -450px -54px;
    }

ul.cssmenu li.forum a:hover {
    background-position: -600px -54px;
    }

ul.cssmenu li.contact a:hover {
    background-position: -750px -54px;
    }

/*
*   Clicked Links
*/
ul.cssmenu li.home a:active {
    background-position: 0 -54px;
    }

ul.cssmenu li.photos a:active {
    background-position: -150px -54px;
    }

ul.cssmenu li.racing a:active {
    background-position: -300px -54px;
    }
ul.cssmenu li.blog a:active {
    background-position: -450px -54px;
    }

ul.cssmenu li.forum a:active {
    background-position: -600px -54px;
    }

ul.cssmenu li.contact a:active {
    background-position: -750px -54px;
    }

/*
*   Selected/Active Links
*/
ul.cssmenu li.home a.selected {
    background-position: 0 -108px;
    }

ul.cssmenu li.photos a.selected {
    background-position: -150px -108px;
    }

ul.cssmenu li.racing a.selected {
    background-position: -300px -108px;
    }
    ul.cssmenu li.blog a.selected {
    background-position: -450px -108px;
    }

ul.cssmenu li.forum a.selected {
    background-position: -600px -108px;
    }

ul.cssmenu li.contact a.selected {
    background-position: -750px -108px;
    }

Answer 2

您最好使用.myButton:hover而不是主动。当鼠标关闭并释放按钮时，将不再应用悬停状态：）

Answer 3

尝试将jQuery .mouseout（）应用于这些链接。

$(".myLinks").mouseout(function() {
  $(this).css('background-position','0 0'); // original position of your sprite
});

在鼠标点击中拖出链接（当鼠标“向下”时）不是CSS能够处理的东西。 CSS需要额外的伪类，如“a：unactive”，才能发生相同的效果。

CSS a：与iPhone TouchUpInside类似的主动覆盖

3 个答案: