如何将CSS块转换为可点击链接?

时间:2013-11-01 17:48:49

标签: javascript jquery html css wordpress

此处在我的网站上的标签中,只有可自动点击的实际文字。我想要做的是让整个块可以点击。

在我的"关于我" tab是" menu-item menu-item-type-custom menu-item-object-custom menu-item-179"其他标签也是如此,它们只有一个不同的菜单项编号。

我能找到的包含标签的CSS是" current-menu-item"。

我看过这个:how to make the whole block clickable?并查看:block level clickable area not working correctly

我的网站:http://travisingram.net/包含" current-menu-item"的CSS代码。

.current-menu-item {
    color: #fff !important;
    background-color: #3e3f3f !important;
    border-radius: 3px;
    border: 3px solid #e4b41b;

}
.sf-menu li:hover , /*.sf-menu li.sfHover,*/ .current-menu-item {
    color: #fff !important;
    background-color: #3e3f3f;
    border-radius: 3px;
    border: 3px solid #e4b41b;
}
.sf-menu li ul, .current-menu-item, .sf-menu li:hover, .sf-menu li.sfHover {
    border: none !important
}

感谢您试图帮助每个人,但没有任何工作......

4 个答案:

答案 0 :(得分:2)

块不像链接那样的原因是因为它不是链接。而不是让li成为用户点击的矩形,你应该为li里面的链接做这个。在你的css中设置要阻止的“a”元素,然后为它们指定一些填充。您可以在他们的区域内点击。

a{ display:block; padding:10px 20px; }

查看此示例http://jsfiddle.net/NtPAe/

答案 1 :(得分:0)

.sf-menu li中移除10 px填充并将其放入.sf-menu a

.sf-menu a {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
padding: 10px 15px;
text-decoration: none;
}
.sf-menu li {
border: 3px solid #FCC71F;
border-radius: 3px;
float: left;
padding: 0;
position: relative;
text-transform: capitalize;
}

答案 2 :(得分:0)

为此,您需要使用属性line-height。使用此选项设置li元素的最终height,而不是padding

  • 第一步:更改li中的填充

    .sf-menu li {
      padding:0;
    
  • 第二步:添加行高

    .sf-menu li {
      padding:0;
      line-height:30px; 
    }
    

答案 3 :(得分:0)

最好的解决方案是从您的网站中删除a.href这是样本:

< li id="menu-item-196" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-196">
< a href="http://travisingram.net/visual-c-sharp-tools">My Tools</a>
</li >

改变它:

<li id="menu-item-196" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-196" onclick="window.location.href = 'http://travisingram.net/visual-c-sharp-tools';" >My Tools</li>