Wordpress 徽标图像并不总是可点击的答案

【问题标题】：Wordpress Logo Image Not Always ClickableWordpress 徽标图像并不总是可点击的
【发布时间】：2014-02-03 23:42:05
【问题描述】：

我真的不知道如何表达这个问题，因为这是我以前从未遇到过的。

我使用 css 设置为背景的 wordpress 徽标图像在悬停在它上面时确实有问题。有时我可以点击它，有时我不能。这是因为我在 css 中设置图像并使用 text-indent 删除标准文本还是其他什么？

这是直播link。尝试将鼠标悬停在徽标上，看看我在说什么。

我在我的 functions.php 中使用自定义函数来打印此处所示的徽标和菜单：

/**
*   Prints out an ir-anchor with the site-title.
*
*/
function sircon_logo($echo = true) {
$htmlLogo = '';

if (get_bloginfo('name')) {
    $htmlLogo    = '<a';
    $htmlLogo   .= ' id="site-title"';
    $htmlLogo   .= ' class="ir"';
    $htmlLogo   .= ' href="'    . get_bloginfo('url') . '"';
    $htmlLogo   .= ' rel="home">';
    $htmlLogo   .= get_bloginfo('name');
    $htmlLogo   .= '</a>';
}

if($echo) echo $htmlLogo;
else return $htmlLogo;
}

我在 header.php 中使用这个来调用它：

<?php sircon_logo(); ?>

这是我的风格：

/* image replace */
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}

/* logo */
#site-title {
    position: absolute;
    display: block;
    top: 25px; left: 15px;
    width: 157px; height: 64px;
    background-repeat: none;
    background-image: url('style/logo.png');
}
#site-title h1 {
    margin: 0;
}
#site-slogan {
    display: none;  
}
@media (min-width: 500px) {
    #site-slogan {
        display: none;
        width: 320px;
        margin: 0 auto;
        color: #fff;
        font-size: 26px;
        font-style: italic;
        line-height: 1.1;
        letter-spacing: -1px;
        text-align: center;
        padding: 14px 0 0 30px;
    }
}
@media (min-width: 760px) {
    #site-slogan {
        display: none;
        width: auto;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 10px; right: 10px;
    }
}

【问题讨论】：

标签： php css wordpress

【解决方案1】：

原因是导航栏与徽标重叠。所以将 z-index 应用到 logo 上

#site-title {
z-index:300;
}

【讨论】：

【解决方案2】：

为您的徽标设置z-index：

#site-title {
    z-index: 500;
}

更多信息请查看this

【讨论】：

本来想去的，在问完这个问题后，stack 不让我这么快 :)

【解决方案3】：

这里有 2 个解决您的问题的方法

解决方案 1

#site-title {
z-index: 500;
}

解决方案 2

#main-menu {
left: 220px;
right: 0;
width: auto;
}

希望对你有帮助:)

【讨论】：