CODEWITHSUNDEEP
htmlcss
user12635663
user12635663

Reputation:

How to make the link inside Button change color on hover without hovering over link

My link changes color on hovering over it directly but does not change color when I hover over the button and not the link directly

btn:hover{
color: black;
}

This does not work. 

a:hover{
color:black
}

This is working currently but does not do the job as needed.

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

When the cursor is over the link directly.

How do I make the button change the color of the link when I hover over it?
As seen in the first image.

Upvotes: 4

Views: 2804

Answers (7)

Chukwuemeka Maduekwe
Chukwuemeka Maduekwe

Reputation: 8526

//Using plain JavaScript with out 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>

Upvotes: 0

devDesign
devDesign

Reputation: 21

just try this 

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>

Upvotes: 1

Mirko Zovko
Mirko Zovko

Reputation: 1

Well you have few ways to do it. Here are two examples, the one that you should probably use because you need to expand link dimensions because of the false click,and second is how you did it probably.

.btn:hover a{
  color:black;
}

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

Upvotes: 0

Ashish chakravarti
Ashish chakravarti

Reputation: 67

Please try this- 

btn:hover a {
  color: black;
}

Upvotes: 0

Nicicalu
Nicicalu

Reputation: 795

btn is not an element so if it is a class you have to use .btn:hover else you have to use button:hover

The problem is, that your link doesn't fill the whole btn. You have to use btn:hover but the color should change only on the link:

.btn:hover > a{
    color: black;
}

Upvotes: 0

Kevin
Kevin

Reputation: 1357

Probably you didn't add padding to the <a> tag. it need to add padding or width to define a area to hover over. if you add padding in parent <li>, therefore you need to hover over the <li> to change the color of the <a> tag. 

.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>

Upvotes: 5

Yasaman.Mansouri
Yasaman.Mansouri

Reputation: 560

btn is wrong try button selector like below. 

button:hover{
color: black;
}

Upvotes: 2

Related Questions