I am trying to get a link to be half one color and half another color, then switch upon hover. So: (white)Hello (Blue)Everyone! -> (Blue)Hello (White)Everyone!
I think I may have dumbed down the code too much... this is a better example.
How do I get it to where "EVERYONE!" does not have a box around it?
HTML:
<div class="home-logo-text">
<a href="#">
HELLO
<span class="home-logo-text-roads">
EVERYONE!
</span>
</a>
</div>
CSS:
.home-logo-text a {
font-family: 'Oswald', sans-serif;
font-size: 60px;
font-weight: 700;
text-transform: uppercase;
position: relative;
margin-bottom: 0px;
text-align: center;
line-height: 1;
padding: 5px 25px 0;
border: 5px solid;
color: #808080;
}
.home-logo-text-roads {
font-family: 'Oswald', sans-serif;
font-size: 60px;
font-weight: 700;
text-transform: uppercase;
position: relative;
margin-bottom: 0px;
text-align: center;
line-height: 1;
padding: 5px 25px 0;
border: 5px solid;
color: #6698cb;
}
.home-logo-text.light a {
color: rgba(255,255,255,0.9);
}
.home-logo-text a:hover {
color: #6698cb;
}
.home-logo-text a:hover .home-logo-text-roads {
color: #808080;
}
a:hover .home-logo-text-roads {
color: #ffffff;
}
Your last CSS rule doesn't look right:
.home-logo-text-roads a:hover {
color: #ffffff;
}
This CSS says "for an <a> element sitting inside a .home-logo-text-roads element, when it gets hover change its text color to #ffffff. Which is clearly not what you wanted, since you have no <a> element inside your span. If you want to change the span's color on hover event of the <a> which is its parent, switch the selectors around:
a:hover .home-logo-text-roads {
color: #ffffff;
}
Remember when there's a space between selectors it indicates a fuzzy hierarchy and the rules are applied to the element to the far right.
You need this. Use whatever color you want.
.home-logo-text a:hover .home-logo-text-roads {
color: #707070;
}
Check DEMO here.
Put the correct order of the HTML elements so CSS styles will be applied:
.home-logo-text a {
color: #707070;
}
.home-logo-text-roads {
color: #6698cb;
}
.home-logo-text a:hover {
color: #6698cb;
}
.home-logo-text a:hover .home-logo-text-roads {
color: #ffffff;
}
Related
When I hover over the button, it stops displaying "Middle School" and instead just becomes a white bar. How do I fix this without using
.buttonM {
width: 100%;
/* set a width so it doesnt change upon hover */
border: 1px solid #fff;
background: #de5426;
padding: 3px 21px;
color: #ffffff;
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
vertical-align: middle;
letter-spacing: 1px;
font-weight: bolder;
font-family: "montserrat";
}
.buttonM:hover span {
display: none
}
.buttonM:hover {
background-color: #fff;
color: #de5426;
cursor: pointer;
}
.buttonM:hover:before {
content: "Middle School";
}
<button class="buttonM">
<span>Middle School</span>
</button>
I understand you confusion. I was this confused when I started too.
anyway, you don't need to add span in a button unless you have a purpose for that.
the problem happens because you added hover to the span and to the button. so my advice is to minimize your code as much as possible. you also added two font family for the button. don't do that. also don't add cursor: pointer in the hover. you should put it in the button style, not its hover.
here is a working button from your code and I hope it's what you need.
.buttonM {
width: 100px;
height: fit-content;
background: #de5426;
color: #fff;
font-size: x-large;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
.buttonM:hover {
background-color: #fff;
color: #de5426;
}
<button class="buttonM">
<span>Middle School</span>
</button>
I have a button with a link within it. I want the button's background color and the link's text color to change when I hover over the button. However, I can't get the link's color to change when I hover over the button, only when I hover over the link. Here's what I have.
button {
background-color: navy;
padding: 1%;
font-size: 16px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 4px inset darkgrey;
}
button a {
color: white;
text-decoration: none;
font-weight: bold;
}
button a:hover {
color: navy;
}
button:hover {
background-color: white;
}
<button>Lorem ipsum</button>
Thanks!
It was not very complicated, like gift!
button {
background-color: navy;
padding: 1%;
font-size: 16px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border: 4px inset darkgrey;
}
button a {
color: white;
text-decoration: none;
font-weight: bold;
}
button:hover {
background-color: white;
}
button:hover a {
color: navy;
}
<button>Lorem ipsum</button>
Someone answered this and deleted it, but it worked:
button:hover a {
color: navy;
}
As said by other users, you shouldn't place a link inside a button. If you need the button to open another page you could place the button inside a form and specify the destination on the action, like this:
<form action="random.html">
<button>Lorem ipsum</button>
</form>
I've been trying to change the color of my text (Normal and Hover) but nothing seems to work. Tried !important but still not showing. Have tried looking at other answers but didn't work.
CSS & HTML Div Code (I have tried removing text-decoration none)
#five {
position : fixed;
top : 10px;
right : 100px;
font-family : monospace;
font-weight : bold;
font-size : 16px;
color : red!;
}
#five:hover {
color : black;
text-shadow : 5px 5px 5px red;
}
<p id="five">
<a href="UNKNOWN" target="_target" style="text-decoration: none;">
TEST5
</a>
</p>
You need to style the a tag, not the parent.
#five a {
text-decoration: none;
color: red;
}
#five:hover a {
color: black;
}
This happens because the <a> tag applies its own color by default (which is a benefit in most cases, but in your case you have to manually change the color directly by using the a selector).
Complete, fixed code:
#five {
position: fixed;
top: 10px;
right: 100px;
font-family: monospace;
font-weight: bold;
font-size: 16px;
}
#five:hover {
text-shadow: 5px 5px 5px red;
}
/* this what I added */
#five a {
text-decoration: none;
color: red;
}
#five:hover a {
color: black;
}
<p id="five">
TEST
</p>
Hi it's because you need to colour the a tag so you could add a class or id to the a tag and then change that.
Change the css to this:
.five {
position: fixed;
top: 10px;
right: 100px;
font-family: monospace;
font-weight: bold;
font-size: 16px;
color: red!;
}
.five:hover {
color: black;
text-shadow: 5px 5px 5px red;
}
And change the html to this:
<p id="five"><a class="five" href="UNKNOWN" target="_target" style="text-decoration: none;">TEST5</a></p>
I'm trying to put the text with button on right on the same level but for some reason it doesn't show up correctly. What am I doing wrong?
.lyrics {
margin: 20px 0;
}
.lyrics a {
color: white;
padding: 10px 16px;
border: 1px solid white;
font-size: 11px;
letter-spacing: 2px;
}
.lyrics a:hover {
text-decoration: none;
color: black;
background: #f0d0b5;
}
lyric-align {
display: inline-block;
margin: 0;
}
Song Title <div class="lyrics">Lyrics
Just write html like this:
<div class="lyrics">Song Title Lyrics</div>
And css like this:
.lyrics {
margin: 20px 0;
}
.lyrics a {
color: white;
padding: 10px 16px;
border: 1px solid white;
font-size: 11px;
letter-spacing: 2px;
}
.lyrics a:hover {
color: black;
background: #f0d0b5;
text-decoration: none;
}
And because now you have one div, you can move him where you want. If you want to have a wonder size not across the entire page, but just around the text, use:
.lyrics{
width: fit-content;
width: -moz-fit-content;
}
My recommended solution
I think the best solution would be to do it without DIV, leave only the "a" element there and style it like this. But I don't know what part of the page you didn't show.
HTML
Song Title Lyrics
CSS
.lyrics {
margin: 20px 0;
color: white;
padding: 10px 16px;
border: 1px solid white;
font-size: 11px;
letter-spacing: 2px;
}
.lyrics:hover {
text-decoration: none;
color: black;
background: #f0d0b5;
}
Couple of things I see in your code:
A div is a block element, it's going to take up the whole page horizontally where it is placed.
The button is there, you can see it if you hover over the space below the text Song Title. But you don't have a closing tag for the first tag.
Extra Credit
Your CSS for your class lyric-align is missing a dot in front of the class's identifier.
Does this work for you?
I think you want the lyrics to be inline .
.lyrics {
margin: 20px 0;
}
.lyrics a {
color: white;
padding: 10px 16px;
border: 1px solid white;
font-size: 11px;
letter-spacing: 2px;
}
.lyrics a:hover {
text-decoration: none;
color: black;
background: #f0d0b5;
}
lyric-align {
display: inline-block;
margin: 0;
}
.lyrics {
display:inline;
}
.song-title {
display:inline;
}
<p class="song-title">Song Title </p><a class="lyrics" href="#">Lyrics</a></div>
If you want a button instead of the link, view this link.
I want to remove blank spaces between the buttons, so that when I for example hover over the NORMAL button, there will be no blank space between it and the HARD button. How can I do that and where do these blank spaces come from?
body {
margin: 0;
}
#stripe {
background-color: white;
text-align: center;
height: 50px;
color: black;
}
button {
border: none;
background: none;
text-transform: uppercase;
height: 100%;
font-weight: 700;
color: black;
letter-spacing: 1px;
font-size: inherit;
transition: all 0.3s;
outline: none;
}
button:hover {
color: white;
background: black;
}
.selected {
color: white;
background: black;
}
<div id="stripe">
<button class="mode">Easy</button>
<button class="mode">Normal</button>
<button class="mode selected">Hard</button>
</div>
Browsers always add spaces between some elements, including buttons. To remove these, you need to set font-size to zero for their parent container. Then, to restore text size inside buttons, set font-size for them.
#stripe {
font-size: 0;
}
button {
font-size: 14px; // Set font size that you need here
}
Either remove the spaces and carriage returns, or put an HTML comment between them.
body {
margin: 0;
}
#stripe {
background-color: white;
text-align: center;
height: 50px;
color: black;
}
button {
border: none;
background: none;
text-transform: uppercase;
height: 100%;
font-weight: 700;
color: black;
letter-spacing: 1px;
font-size: inherit;
transition: all 0.3s;
outline: none;
}
button:hover {
color: white;
background: black;
}
.selected {
color: white;
background: black;
}
<div id="stripe">
<button class="mode">Easy</button><!--
--><button class="mode">Normal</button><!--
--><button class="mode selected">Hard</button>
</div>
Add display: flex; to the parent container
If using bootstrap, can group buttons together by wrapping in div with class="btn-group".
Example for v3.3.7: https://getbootstrap.com/docs/3.3/components/#btn-groups-single
Visually might or might not be what you want. Has rounded corners on left and right ends and straight line between buttons. Can probably restyle.