Question

我真的不确定如何说出这个问题，因为这是我以前从未遇到的事情。

我的wordpress徽标图片使用css设置为背景，当它悬停在它上面时真的很麻烦。有时我可以点击它，有时我不能。这是因为我在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;
    }
}

Answer 1

原因是导航栏与徽标重叠。因此，将z-index应用于徽标

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

Answer 2

为您的徽标设置z-index：

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

有关详细信息，请查看this

Answer 3

以下是针对您的问题的两种解决方案

解决方案1

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

解决方案2

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

希望这可以帮助你：）

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

3 个答案: