Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I have set a hover effect in my CSS, but it seems to be having no effect. What am I doing wrong?
.button_link {
display: inline-block;
border: solid black 2px;
border-radius: 15px;
background-color: #ddf;
padding: 10px;
text-decoration: none;
}
.button_link#hover {
color: orange;
background-color: #fff;
}
<div><a class="button_link" href="http://example.com">Return to example.com</a></div>
<div class="button_link">aa</div>
It doesn't work as you expect it to simply because you've written your selector as:
.button_link#hover,
Which is the selector for an element with the class of button_link and an id of hover; whereas you want to target the element of class button_link with the :hover pseudo-class, therefore:
.button_link:hover
.button_link {
display: inline-block;
border: solid black 2px;
border-radius: 15px;
background-color: #ddf;
padding: 10px;
text-decoration: none;
}
.button_link:hover {
color: orange;
background-color: #fff;
}
<!DOCTYPE html>
<html>
<div><a class="button_link" href="http://example.com">Return to example.com</a></div>
<div class="button_link">aa</div>
</html>
Reference:
CSS Selectors Level 3.
# hover needs to be :hover
That should fix it
Because you need to write:
.button_link:hover {}
.button_link {
display: inline-block;
border: solid black 2px;
border-radius: 15px;
background-color: #ddf;
padding: 10px;
text-decoration: none;
}
.button_link:hover {
color: orange;
background-color: #fff;
}
<!DOCTYPE html>
<html>
<div><a class="button_link" href="http://example.com">Return to example.com</a></div>
<div class="button_link">aa</div>
</html>
Hello, You should change button_link#hover to button_link:hover.
Happy coding!
Reference: CSS Pseudo-classes
https://www.w3schools.com/css/css_pseudo_classes.asp
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 months ago.
Improve this question
I've p-dropdown, and i need to make its placeholder to going up, when i choose one of the sort options, like on screenshots. Is there any way to achieve it with p-dropdow? Cause when i just add placeholder="Sort by" to p-dropdown, it disappears, when i choose sort options
You can do this with raw html and css as follows. You might be able to adapt it to suit your needs.
.input-container {
display: inline-block;
padding: 0.5rem 0.5rem;
position: relative;
border-radius: 0.25rem;
border: 1px solid lightgray;
}
.input-container>label {
display: none;
font-size: 0.6rem;
position: absolute;
background-color: white;
left: 0.5rem;
top: -0.4rem;
padding-inline: 0.25rem;
}
.input-container:focus-within {
border: 1px solid blue;
box-shadow: 0px 0px 8px 0px #0000ff;
}
.input-container:focus-within>label {
display: inline-block;
}
.input-container:focus-within input::placeholder {
opacity: 0;
}
.input-container>input {
outline: none;
border: none;
}
<div class=input-container><label id='placeholder-text' for='cats'>Choose a cat</label>
<input id='cats' placeholder='Choose a cat' type="text" list="catoptions" />
<datalist id="catoptions">
<option>Tiger</option>
<option>Lion</option>
<option>Jaguar</option>
<option>Kitten</option>
</datalist>
</div>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I am trying to hide my .dwBtn class button on hover, using the code below, but it's not working.
.dwBtn {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: rgb(0, 180, 0);
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.dwBtn:hover {
display: none;
}
<button class="dwBtn">Test</button>
I've searched on Google and on StackOverflow but cannot find a solution. I have tried changing the opacity, like so:
opacity: 0;
But it still isn't doing anything as far as I can see. It looks as if there was a typo somewhere, but I can't find it.
When the element isn't displayed, you can't hover it, so the rule stops applying, so it springs back immediately.
Using opacity as you suggested will work, it just didn't seem to because of typo you have since fixed.
.dwBtn {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: rgb(0, 180, 0);
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
.dwBtn:hover {
opacity: 0;
}
<button class="dwBtn">Test</button>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I want to draw a line before and after the text. And I want to do these features twice. Like in the image below : How can I achieve this? I tried before and after but could not solve it. I am beginner in CSS. THanks for your time.
Something like this, with ::before and ::after pseudo-elements.
.team {
text-align: center;
position: relative;
color: darkslategray;
font-size: 2em;
}
.team-span {
display: block;
text-transform: uppercase;
font-size: 0.5em;
margin-bottom: 0.5em;
}
.team-span::before,
.team-span::after {
display: inline-block;
content: "";
width: 1.5em;
height: 0.2em;
margin: 0 0.5em;
/* the lines */
border-top: 2px solid;
border-bottom: 2px solid;
}
<h2 class="team">
<span class="team-span">Our Best Team</span> Our Team
</h2>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I am making a website for a school project and i'm trying to make the height of a border fit the size of the text. however, whenever i adjust the height the text doesn't go with it and i'm not sure how to fix this.
Code:
#slidercompare {
font-size: 17px;
font-family: sans-serif;
border-style: solid;
border-color: grey;
opacity: 87%;
position: absolute;
top: 5px;
right: 10px;
}
#slidercompare {
width: 355px;
height: 40px; /* for some reason I can't adjust the height smaller than this or else the border goes through the text. */
color: white;
background-color: black;
}
<html>
<head>
<link rel="stylesheet" href="css/boardgames.css">
</head>
<body>
<h1 id="slidercompare"><br>Chess.com (left) vs Video Chess (right)</h1>
</body>
</html>
Any ideas? Thanks
May this be what you are trying to achieve?
#slidercompare {
font-size: 17px;
border-style: solid;
border-color: grey;
opacity: 87%;
}
#slidercompare {
width: fit-content;
color: white;
background-color: black;
}
<h1 id="slidercompare">Chess.com (left) vs Video Chess (right)</h1>
I inserted <br> to <h1>. Used that to seperate a thing earlier i dont need to seperate now. So, removing the <br> tag fixed the issue.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I have a problem with styling my navigation ID. I feel like I am doing everything correctly, but my HTML is not recognising my styling when I refresh it. What am I doing wrong?
Here is the HTML code -
<body>
<div id="Navigation">
<ul>
<li> Marketing </li>
</ul>
</div>
And here is the styling of that id -
#Navigation {
width: 20%;
height: 70%;
background-color: #FC0;
border: 2px solid #000;
color: #FFF;
margin: 0 auto
}
You are never closing your div tag.
<div id="Navigation"></div>
And make sure you have a closing curly bracket for your CSS.
#Navigation {
width: 20%;
height: 70%;
background-color: #FC0;
border: 2px solid #000;
color: #FFF;
margin: 0 auto;
}
Looks like your CSS file has a UTF-8 BOM. Try recreating the file, or add /* */ in front of every rule. Eg:
/* */
#Navigation {
width: 20%;
height: 70%;
background-color: #FC0;
border: 2px solid #000;
color: #FFF;
margin: 0 auto;
}