php - Wordpress Logo 图像并不总是可点击

Question

我真的不确定如何表述这个问题，因为这是我以前从未遇到过的问题。

我使用 css 设置为背景的 wordpress Logo 图像在将鼠标悬停在其上时确实存在错误。有时我可以点击它，有时我不能。这是因为我在 css 中设置图像并使用文本缩进删除标准文本还是其他原因？

这是直播 link .尝试将鼠标悬停在 Logo 上以准确了解我在说什么。

我在我的 functions.php 中使用自定义函数来打印 Logo 和菜单，如下所示:

/**
*   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;
    }
}

Answer 1

原因是导航栏与 Logo 重叠。所以将 z-index 应用于 Logo

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