I have this scss class:
.dropdown-list {
display: block;
position: absolute;
background-color: white;
background-size: 100%;
list-style: none;
border: 1px solid var(--color-grey-light-2);
border-radius: 5px;
overflow: hidden;
li {
padding: 1rem;
&:not(:last-child) {
border-bottom: 1px solid var(--color-grey-light-2);
}
&:hover {
background-color: var(--color-grey-light-2);
}
}
a {
text-decoration: none;
color: currentColor;
}
}
However, the background color is not covering the entire div:
As you can see, there is a little border on the top and on the left of my div.
For completeness, i'm adding the html:
<ul class="dropdown-list" style="margin-top: 0.6rem; cursor: pointer">
<li>
Add Ingrediets to Shopping List
</li>
[...]
The "dropdown-list" class is linked on the "ul" tag and not on the "div" tag. You must add some css for the "div" tag or move the class "dropdown-list" depending on your need.
If it is not fixing your issue you should share the part with the "div" tag.
Give a background color in inline css
<div style="background-color: red;"></div>
this would work
Related
I am trying to code a button that changes color when you hover over it/click on it. However, I ran into an issue. There is a space between the text and the edges of the div section, and if you hover over the button, it turns black but the text does not turn white. I put color:white;. I am not sure as to why this does not fix the problem.
Here is my code:
p {
margin: 0px;
}
.button {
width: 66px;
height: 20px;
border: 2px black solid;
border-radius: 4px;
padding: 5px;
}
.button:hover {
background-color: black;
color: white;
}
a {
color: black;
text-decoration: none;
}
a:hover {
color: white;
}
<div class="button">
<p> Click Me! </p>
</div>
just change your a:hover to .button:hover a
everything will look great. :>
p {
margin: 0px;
}
.button {
width: 66px;
height: 20px;
border: 2px black solid;
border-radius: 4px;
padding: 5px;
}
.button:hover {
background-color: black;
color: white;
}
a {
color: black;
text-decoration: none;
}
.button:hover a{
color: white;
}
<div class="button">
<p> Click Me! </p>
</div>
Ok so heres the deal. You made it too complex. If you had problem with the spaces, its because < a > tag is diplayed inline by default and it makes gap between it's container sometimes.
Here's your code, cleaned and working : https://jsfiddle.net/m6dphvm1/
<a class="button" href="https://www.google.com"> Click Me! </a>
a.button {
border: 2px black solid;
border-radius: 4px;
padding: 5px;
color: black;
text-decoration: none;
display: inline-block;
}
a.button:hover {
background-color: black;
color: white;
}
The problem with your CSS is that your anchor(link) color is black, when you hover on the button you are changing the background of button to black, i.e both anchor color and background are black. due to that text is not being visible.
Change either background-color of button or anchor color to a differnt color and that should work. For example I'm changing the color of anchor to blue.
.button:hover {
background-color: black;
color: white;
}
a {
color: blue;
text-decoration: none;
}
a is an inline element, meaning it's designed to be nested in plain text (or what otherwise could be). It's only occupying the immediate space around the text.
However, a tags are also totally allowed to wrap around elements according to the HTML5 spec (not that anyone would stop you otherwise, it's just convention). So if you want the a tag to occupy the entire space just wrap it around the element.
Better yet, only use the a tag. The rest is basically redundant:
<a class="button" href="https://www.google.com">
Click Me!
</a>
.button {
width: 66px;
height: 20px;
border-radius: 4px;
padding: 5px;
color: black;
border: 2px black solid;
}
.button:hover {
background-color: black;
color: white;
}
https://jsfiddle.net/hyp4a9ya/
This question already has answers here:
How to change the style of the title attribute inside an anchor tag?
(10 answers)
Closed 6 years ago.
Using HTML and CSS, but not JS, how can I alter the position, text colour and background colour of the title text that shows when a link is hovered over? I would like to centre the title text below the midpoint of the link text.
a:link {text-decoration: none;
color: #000;
border-bottom: 2px solid #f00; }
a:hover, a:active
{text-decoration: none;
color: #f00;
border-bottom: 2px solid #f00; }
a:visited {text-decoration: none;
color: black;
border-bottom: 2px solid #888; }
<div>
text
</div>
UPDATE
After finally figuring out what OP meant is that the solution originally works fine with one exception, the attribute title's default behavior is not suppressed, therefore an extra tooltip follows the customized tooltip.
The solution is this: Do not use the title attribute Without JavaScript you are at the mercy of many default behaviors you cannot control with CSS. But don't get discouraged because there is an alternative that you can use that's not only valid and semantic (if labeled correctly,) it is functionally flexible as well.
Use the data-* attribute (* = any string in lower caps no spaces--use dashes instead.)
We can use any string at any length
We can name it anything we want (within the previously stated restrictions)
We can have as many data-* attributes on an element and...
...that element can be any element.
See the last two examples in Snippet below.
Use the ::before and ::after pseudo-elements with the attr() value. It's not limited to title which is nice, take a look at the Snippet below.
SNIPPET
div {
margin: 50px;
position: relative;
}
a:link {
text-decoration: none;
color: #000;
border-bottom: 2px solid #f00;
}
a:visited {
text-decoration: none;
color: black;
border-bottom: 2px solid #888;
}
a:hover,
a:active {
text-decoration: none;
color: #f00;
border-bottom: 2px solid #f00;
}
a:hover::after {
content: attr(title);
color: blue;
position: absolute;
top: 3ex;
left: -.5ch;
border-bottom: 0 none transparent;
}
a[name]:hover::after {
content: attr(href);
background: black;
color: cyan;
border-bottom: 0 none transparent;
}
a[target]:hover::after {
content: attr(target);
left: -1.5ch;
background: red;
color: white;
border-bottom: 0 none transparent;
}
a[data-node]:hover::after {
content: attr(data-node);
left: -4ch;
border-bottom: 0 none transparent;
background: black;
color: gold;
}
a[data-anything]:hover::after {
content: attr(data-anything);
left: 0;
border-bottom: 0 none transparent;
color: purple;
width: 8ch;
}
<div>
text
</div>
<div>
text
</div>
<div>
<a href="h++p://nowhere.lost" name='destination'>Where do I go to?</a>
</div>
<div>
Target
</div>
<div>
Data-*
</div>
<div>
Use Data-*
</div>
I'm trying to move the border-bottom down so more of my active-link can be seen.
.navigation a.active-link {
background-border: #red;
border-style: solid;
border-bottom: solid white;
color: black;
padding:10px;
}
#navigation {
border-bottom: 1px solid currentColor;
text-decoration: none;
word-wrap: break-word;
padding-top: 10px;
margin-bottom: 15px;
overflow: hidden !important;
white-space: no-wrap;
text-overflow: clip;
height: 26px;
}
The problem is when I try and increase the padding-bottom it stacks my text and I'm trying to avoid that.
https://jsfiddle.net/akn5r7y5/2/
You can add the padding-bottom you need and set the anchor line-height accordingly so they don't stack
#navigation a {
line-height:26px;
}
#navigation {
padding-bottom:26px;
}
https://jsfiddle.net/akn5r7y5/3/
Adding padding-bottom to your navigation should fix your problem.
Read more about box model (paddings, margins etc.) here - https://css-tricks.com/box-sizing/
Remove your padding-top, and use line-height, must be equal to the height of the content, so it will be centered:
Your #navigation must look like this then:
#navigation {
border-bottom: 1px solid currentColor;
text-decoration: none;
word-wrap: break-word;
margin-bottom: 15px;
overflow: hidden !important;
white-space: no-wrap;
text-overflow: clip;
height: 26px;
line-height: 26px;
}
I think you're making this way harder than you need. Try to prevent using a fixed height. Also use a display: inline-block; on the anchor. This way it has a height you can actually work with. Example:
#navigation {
border-bottom: 1px solid currentColor;
}
.navigation a {
color: black;
padding: 10px;
display: inline-block;
text-decoration: none;
}
.navigation a.active-link {
background: red;
border: 1px solid black;
border-bottom: none;
}
<div class="navigation" id="navigation">
Show all
<a href="#" >title</a>
<a href="#" >title1</a>
<a href="#" >title2</a>
<a href="#" >title3</a>
<a href="#" >title4</a>
</div>
here is some clue for you.
ok forget what i just said about hr tags.
i just got what is your question, so you wanted to create a navigation with a border bottom, and a full border if you are in that page.. i suggest you to using ul li tags. its a bit comfotable, and dont use too many link if you dont have any responsive yet.
because, the whitegaps u think it's a easy task but it actually a big trouble in here. this <a></a> link should not seperated and you should type the code like this ridiculously like this
<a>link</a><a>link</a>
which mean, you should type it without a gaps in it, if only you put it in li tags, it would be easier to read like this
<li><a>link</a></li><li>
<a>link</a></li><li>
etc
so you only thinking about border inside of a, dont over think about a border in navigation div.
this is the code, have a look
.navigation a.active-link {
border: solid 1px black;
color: black;
padding:10px;
}
.navigation a{
padding:10px;
border-bottom: 1px solid black;
}
#navigation {
text-decoration: none;
padding-top: 10px;
padding-bottom:10px
}
hr{
border:solid black 1px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12 col-lg-10 col-lg-offset-1">
<div class="navigation" id="navigation">
Show all<a href="#" >title</a><a href="#" >title1</a><a href="#" >title2</a><a href="#" >title3</a><a href="#" >title4</a><a href="#" >title5</a>
</div>
</div>
I'm creating tabs, where each link inside the tab list is in a div with a border - something like:
In order to hide the bottom border of the tabset below the selected tab, I'm adding a pseudo element (:after) that is the full width of the link, and whose height is the same as the bottom border (2px), and also has a bottom value of negative the border height (-2px). I'm running into an issue where, depending on the position (bottom value) of the pseudo element, its rendered height changes. If I set its height to 2px, it fluctuates between 1px and 2px, and does this every 2px when moving its position.
For example, at bottom: 3px, it looks like this (I've made the background red for illustration purposes):
But then if I set bottom: 2px, I get this:
I see this behavior on both firefox and chrome. Here's a codepen illustrating.
And here's an inline snippet of the same code:
.main-container {
padding: 50px;
font-family: arial;
}
.link-container {
display: inline-block;
border: 2px solid #000;
}
a {
position: relative;
display: block;
text-decoration: none;
font-weight: bold;
color: #000;
padding: 5px 5px 15px;
}
a:hover {
background: #ccc;
}
a:after {
content: "";
position: absolute;
z-index: 1;
height: 2px;
left: 0;
right: 0;
bottom: 2px;
background: red;
}
a.tab2:after {
bottom: 3px;
}
<div class="main-container">
<div class="link-container">
<a class="tab1" href="#">Test Tab</a>
</div>
<div class="link-container">
<a class="tab2" href="#">Test Tab</a>
</div>
</div>
What's going on?
I don't know if it's still relevant or not, but I run into the same problem and I couldn't find any solution online so I came up with my own - I think this problem related either with float size of the parent element, either with something else.
But adding "transform: scaleY(1.0001);" to your pseudo-element seems to work for me
.main-container {
padding: 50px;
font-family: arial;
}
.link-container {
display: inline-block;
border: 2px solid #000;
}
a {
position: relative;
display: block;
text-decoration: none;
font-weight: bold;
color: #000;
padding: 5px 5px 15px;
}
a:hover {
background: #ccc;
}
a:after {
content: "";
position: absolute;
z-index: 1;
height: 2px;
left: 0;
right: 0;
bottom: 2px;
background: red;
transform: scaleY(1.0001);
}
a.tab2:after {
bottom: 3px;
}
<div class="main-container">
<div class="link-container">
<a class="tab1" href="#">Test Tab</a>
</div>
<div class="link-container">
<a class="tab2" href="#">Test Tab</a>
</div>
</div>
Most likely your browser is zoomed in on the page. Make sure that you're viewing the page at 100% size by clicking ctrl + 0 and see if the height still changes with the position.
Other than that, if I understand correctly what you want to achieve, you're making things much more complicated than needed.
Firstly, unless you have a reason, the link-container divs are not needed. You can just put the links directly as childs of the main-container div and add borders to them directly.
Secondly, you can just use border-bottom and set it to whatever you like.
Why don't you just do it like this: Remove the pseudo element completely and reduce the border to three sides:
.link-container {
display: inline-block;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
}
Here it is in your snippet:
.main-container {
padding: 50px;
font-family: arial;
}
.link-container {
display: inline-block;
border-top: 2px solid #000;
border-left: 2px solid #000;
border-right: 2px solid #000;
}
a {
position: relative;
display: block;
text-decoration: none;
font-weight: bold;
color: #000;
padding: 5px 5px 15px;
}
a:hover {
background: #ccc;
}
<div class="main-container">
<div class="link-container">
<a class="tab1" href="#">Test Tab</a>
</div>
<div class="link-container">
<a class="tab2" href="#">Test Tab</a>
</div>
</div>
I'm making a website and want to have a link inside a div that changes colour when hovered over, however I've come across a problem. Pre hover, I want a border around the div the same colour as the text in the link inside. The background colour should be white. Then, upon hover, I want the background colour to change to the colour of the text and border, and the text to become white. Because I have padding inbetween the link and div border, it doesn't quite work as intended. Here is the source html/css:
HTML:
<div id="home">
HOME
</div>
CSS:
#home {
border: 4px solid #00a651;
font-size: 30px;
padding: 10px 20px 10px 20px;
margin: 20px 100px 20px 100px;
display: inline-block;
}
#home a {
background: #ffffff;
color: #00a651;
text-align: center;
}
#home a:hover {
background: #00a651;
color: #ffffff;
}
When anywhere within the div is hovered over other than the link, nothing happens, and when you hover over the link the padding remains white. What do I need to do to make it so the colour change happens when anywhere on the div is hovered over, and the whole divs colour changes? Thanks, Brandon :)
#home {
font-size: 30px;
margin: 20px 100px 20px 100px;
display: inline-block;
}
#home a {background: #ffffff;
border: 4px solid #00a651;
padding: 10px 20px 10px 20px;
color: #00a651;
text-align: center;
}
#home a:hover {background: #00a651;
color: #ffffff;
}
<div id="home">
HOME
</div>
You need to add the hover event to the div and the anchor:
#home {
border: 4px solid #00a651;
font-size: 30px;
padding: 10px 20px 10px 20px;
margin: 20px 100px 20px 100px;
display: inline-block;
}
#home a {
background: #ffffff;
color: #00a651;
text-align: center;
}
#home:hover {
background: #00a651;
color: #ffffff;
}
#home:hover a {
background: #00a651;
color: #ffffff;
}
<div id="home">
HOME
</div>
I recommend using the jQuery library, if you know how to use it:
Link your jQuery download to your main html file or use a CDN.
In your JavaScript file add a hover event on your link and use the css effect to to change the color of the div once you hover over the link. Then add another css effect so the link changes color as the div does. Like this:
$(document).ready(function(){
$('a').hover(function(){
$('#home').css("background-color","#00a651");
$('a').css("color", "chooseacolor");
});
});
I am not entirely sure what you are asking of, so this is the best answer I can give!
I don't think using :hover on DIV elements is a good idea. As I know, this practice is not fully supported on all browsers of all versions. Why not use some JS?
But, anyway, if you need all area (including padding) in the DIV become clickable - you should rather make it "display:block" in CSS.
$(document).ready(function() {
$('#home').hover(function() {
$(this).css('background-color', '#00a651').find('a').css({
backgroundColor: '#00a651',
color: '#FFFFFF'});
}, function() {
$(this).css('background-color', '#FFFFFF').find('a').css({
backgroundColor: '#ffffff',
color: '#00a651'});
});
});
#home {
border: 4px solid #00a651;
font-size: 30px;
padding: 10px 20px 10px 20px;
margin: 20px 100px 20px 100px;
display: inline-block;
}
#home a {background: #ffffff;
color: #00a651;
text-align: center;
}
/* There is no need to use :hover anymore if using a script */
<!-- this goes to the HEAD section if not arleady there -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="home">
HOME
</div>