Question

在我的导航栏上，当我用鼠标悬停时，我必须直接点击文字，但我想要它，因为当我接近文本时，悬停的背景出现，但它不可点击，直到我把鼠标放在文字上，希望你能理解我。这是代码：

echo '
    <nav>
    <ul>';

    foreach($variables['menu_buttons'] as $act => $button)
    {
        $url = 'http://'.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
        $class = (GetCurrentPageAdress() == $button['href']) ? 'active' : '';
        echo '<li id="button_'.$act.'"><a class="'.$class.'" href="'.$button['href'].'">'.$button['title'].'</a></li>'; 
    }

echo '
    </ul>
    <div class="handle"></div>
    </nav>';

这是一行：echo '<li id="button_'.$act.'"><a class="'.$class.'" href="'.$button['href'].'">'.$button['title'].'</a></li>';

我可以点击它然后我不能让它保持活跃......

Answer 1

为了使链接的整个背景可以点击，你应该用css设置链接样式：

a{
  display:block;
  width: the_widh_you_want;
  height:the_height_you_want
}

现在您有一个链接，整个背景也可以点击。

Answer 2

我应该将<a>背景设置为透明（您可以使用任何颜色）

a {
    background-color: transparent;
}

这使其内部区域可以点击（不仅仅是文本）

Answer 3

嗯，目前还不清楚你的导航栏是如何设计的，但下面是我应该如何做的一个例子。

<li><a href="{% url 'auth_password_change' %}">Change Password</a></li>

以下是带有示例的整个代码段。请忽略HTML和JavaScript部分，这些部分用于为您提供一个有效的示例。

运行它（点击那个大蓝色的“运行代码片段”并尝试点击元素。如您所见，您不必再点击文本了。

nav li {
  float: left;
  list-style-type: none;
}

/* notice the display and the padding */
nav li a {
  display: inline-block;
  padding: 10px 20px;
  background-color: green;
}

/* displays hover effect */
nav li a:hover {
  background-color: orange;
}

// IGNORE THIS: not required, just to proof that the link got clicked.
var a = document.getElementsByClassName('lnk');
for (var i = 0; i < a.length; ++i) {
  a[i].addEventListener('click', function(event) {
    document.getElementById('hai').innerHTML = "clicked " + event.target.innerHTML;
  })
}

nav li {
  display: block;
  float: left;
  list-style-type: none;
}

nav li a {
  display: inline-block;
  padding: 10px 20px;
  background-color: green;
}

nav li a:hover {
  background-color: orange;
}

如果活动，如何使链接可点击？

3 个答案: