Как сделать интерактивную ссылку, если она активна?

Question

В моей навигационной панели, когда я наводил указатель мыши на мышь, я должен щелкнуть по тексту, но я хочу, чтобы это было так, потому что, когда я приближаюсь к тексту, появляется фон hover, но он не доступен для клика, пока я не надену мышь на текст, я надеюсь, вы меня понимаете. Вот код:

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

I следует установить <a> фон на прозрачный (вы можете использовать любой цвет) в качестве такого

a { 
    background-color: transparent; 
} 

Это делает его внутреннюю область кликабельным (а не только текст)

Answer 3

Ну, это не ясно, как ваша панель навигации была оформлена, но ниже приведен пример того, как я должен это делать.

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

Ниже приведен весь фрагмент примера. Пожалуйста, проигнорируйте часть HTML и JavaScript, они используются, чтобы дать вам рабочий пример.

Просто запустите его (нажмите на эту большой синий «Run фрагмент кода» и попробуйте нажать на элементы. Как вы можете видеть, вы не должны больше щелкнуть текст.

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

<nav> 
 
    <ul> 
 
    <li id="button_1"><a class="lnk" href="#1">link1</a></li> 
 
    <li id="button_2"><a class="lnk" href="#2">link2</a></li> 
 
    <li id="button_3"><a class="lnk" href="#3">link3</a></li> 
 
    </ul> 
 
    <div class="handle"></div> 
 
</nav> 
 
<p id="hai"></p>