Как сделать так, чтобы ссылка внутри кнопки меняла цвет при наведении курсора на ссылку - PullRequest
Новая
       0

Как сделать так, чтобы ссылка внутри кнопки меняла цвет при наведении курсора на ссылку

3 голосов
/ 20 февраля 2020

Моя ссылка меняет цвет при наведении на нее курсора, но не меняет цвет при наведении курсора на кнопку, а не на ссылку напрямую 

btn:hover{
color: black;
}

Это не работает. 

a:hover{
color:black
}

Это работает в настоящее время, но не выполняет работу по мере необходимости.

When the cursor is over the Button but not the link direcly

When the cursor is over the link directly.

Как заставить кнопку изменить цвет ссылки при наведении на нее курсора?
Как видно на первом изображении.

Ответы [ 7 ]

6 голосов
/ 20 февраля 2020

Возможно, вы не добавили отступ к тегу <a>. необходимо добавить отступы или ширину, чтобы определить область для наведения. если вы добавляете отступ в родительском <li>, вам нужно навести курсор на <li>, чтобы изменить цвет тега <a>. 

.nav{overflow:hidden}
.nav ul{list-style:none; text-align:center;}
.nav ul li{display:inline-block; vertical-align:top}
.nav ul li a{display:block; padding:10px 20px; background-color: silver; color: black}
.nav ul li a:hover{background-color: darkgrey; color: white}
<div class="nav">
  <ul>
    <li><a href="#!">Link</a></li>
    <li><a href="#!">Link</a></li>
    <li><a href="#!">Link</a></li>
    <li><a href="#!">Link</a></li>
  </ul>
</div>
1 голос
/ 20 февраля 2020

просто попробуйте это 

a{
text-decoration:none;
color:white;
}
.btn{
background-color:black;}
.btn:hover {background: gray;}
.btn:hover > a {color:black}
<button class="btn"><a href="#">Home</a></button>
1 голос
/ 20 февраля 2020

btn - это неправильный выбор кнопки, как показано ниже. 

button:hover{
color: black;
}
0 голосов
/ 20 февраля 2020

// Использование простого JavaScript без CSS

<head>  

    <title>  

        How to change the background color 

        after clicking the button ? 

    </title> 

</head>  



<body style = "text-align:center;"> 



    <h1 style = "color:green;" >  

        GeeksForGeeks  

    </h1>  



    <p id = "GFG_UP" style = 

        "font-size: 16px; font-weight: bold;">      

    </p> 



    <button onclick = "gfg_Run()">  

        Click here 

    </button> 



    <p id = "GFG_DOWN" style = 

        "color:green; font-size: 20px; font-weight: bold;"> 

    </p> 



    <script> 

        var el_up = document.getElementById("GFG_UP"); 

        var el_down = document.getElementById("GFG_DOWN"); 

        var str = "Click on button to change the background color"; 



        el_up.innerHTML = str; 



        function changeColor(color) { 

            document.body.style.background = color; 

        } 



        function gfg_Run() { 

            changeColor('yellow'); 

            el_down.innerHTML = "Background Color changed"; 

        }          

    </script>  

</body>

0 голосов
/ 20 февраля 2020

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

.btn:hover a{
  color:black;
}

https://jsfiddle.net/zmirko/rf473kbs/15/

0 голосов
/ 20 февраля 2020

btn не является элементом, поэтому если это класс, который вы должны использовать .btn: hover, иначе вы должны использовать button: hover

Проблема в том, что ваша ссылка не заполняет весь btn , Вы должны использовать btn: hover, но цвет должен меняться только по ссылке: 

.btn:hover > a{
    color: black;
}
0 голосов
/ 20 февраля 2020

Пожалуйста, попробуйте это - 

btn:hover a {
  color: black;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...