i am trying to make a website, but for some reason i am stuck on the hover. I knew how to do this, but i thing i forgot something.
What i want is that when i hover over the black bar the black turns into white so you can see the text.
This is my code:
div.spoiler1:hover div.spoiler1 {
background-color: white;
}
<div style='display:inline; background-color: black;' class='spoiler1'>hey</div>
I also tried this css:
spoiler1:hover spoiler1 {
background-color: white;
}
div.spoiler1:hover,.spoiler1 {
background-color: white;
}
spoiler1:hover {
background-color: white;
}
Good efforts. The issue is that the inline style overrides the sheet. In general, don't use inline styles (hard to debug/maintain, not reusable):
div.spoiler1 {
background-color: black;
display: inline;
}
div.spoiler1:hover {
background-color: white;
}
<div class='spoiler1'>hey</div>
See this JSFiddle.
Related
I'm currently working on a simple project in HTML/CSS (Bootstrap). Very simply, I have the task of styling links to look like buttons, and getting them to stack in a mobile view.
Requirements: buttons should be side-by-side on regular/desktop view, and should stack on top of each other in iPhone/Android devices.
CodePen: https://codepen.io/anfperez/pen/joqoXG
Here's the code I have so far:
html
<a class="button-a" href="www.google">Link that looks like button</a>
<a class="button-b" href="www.amazon.com">Another link that looks like a button</a>
css (Bootstrap can be included)
.button-a, .button-b {
background-color: blue;
color: white;
text-decoration: none;
padding: 10px;
}
.button-a {
background-color: blue
}
.button-b {
background-color: red;
}
When I try viewing the code in a mobile view, the red button button ends up overlapping on top of the blue button since they're both links. How can I get the red button to clear the blue button? I can't use Bootstrap's btn-group in this case.
You can use Flexbox inside a media query to stack the elements using flex-direction: column.
.button-a, .button-b {
background-color: blue;
color: white;
text-decoration: none;
padding: 10px;
}
.button-a {
background-color: blue
}
.button-b {
background-color: red;
}
#media (max-width: 767px) {
.wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
}
}
<div class="wrapper">
<a class="button-a" href="www.google">Link that looks like button</a>
<a class="button-b" href="www.amazon.com">Another link that looks like a button</a>
</div>
....really? you can making a have behaviour of div, if you want them to stack, just make the button class having inline-block
.button-a, .button-b {
background-color: blue;
color: white;
text-decoration: none;
padding: 10px;
margin: 20px;
display:inline-block;
}
Edited Codepen
This make the a link has the margin and padding behaviour like div. You just have to setting the width.. So if the media canvas shorter, the link will automatically stacking
.button-a, .button-b {
background-color: blue;
color: white;
text-decoration: none;
padding: 10px;
margin: 20px;
display:block;
}
.button-a {
background-color: blue
}
.button-b {
background-color: red;
}
<a>Link</a>
Can we prevent this element from having any hover effect without usin :hover?
I usually go:
a {
color= white;
}
a:hover {
color= white;
}
I've checked pointer-event= none; but it disabled the entire element and made it text.
You have some syntax error in your CSS, Please update your CSS with following code:
a, a:hover {
color: white;
}
a {
color: white !important;
}
/*
So you can actually see the white link
*/
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
or if you don't want to use :hover you just add !important in your default CSS
a {
color: white !important;
}
Note: for standard practice we don't use !important frequently. So you can add this css inline. You can check updated code below..
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
First of all. Don't use = inside CSS but use : instead.
To disable the hover (animation) do this:
a, a:hover {
color: white;
text-decoration: none;
}
a:hover {
cursor: text;
}
However, if you assign a href attribute the link will still be clickable.
This you cant disable by css but you need javascript or jquery for that.
Example
test
I'm trying to change the color of a link on hover of a <div>. Is that possible using just CSS? If not, how would I achieve this?
div {
border: 1px solid black;
padding: 15px;
}
div:hover {
color: red;
}
<div>
<a href='www.google.com'> www.google.com </a>
</div>
You need to style the anchor, not the div. Try this:
div {
border: 1px solid black;
padding: 15px;
}
div:hover a {
color: red;
}
<div>
<a href='www.google.com'> www.google.com </a>
</div>
The div itself has no text, so there's no place to apply the color property. So when you hover a div with nothing to color, nothing happens.
As mentioned in another answer, apply the hover to the anchor element, which contains text.
But your original code would work if instead of color you used background-color or border.
div {
border: 1px solid black;
padding: 15px;
}
div:hover {
color: red; /* won't work; nothing to color */
background-color: aqua; /* this will work */
border: 2px dashed #777; /* this will work */
}
<div>
<a href = 'www.google.com'> www.google.com </a>
</div>
rjdown's answer is correct, but the question is if you still need the div at all.
All a div does is provide a block for you to style. If you style the anchor as block, you have just that. Code bloat is bad for your SEO and headache-freeness. ;-)
Try this:
a:link {
display: block;
/* make it act as the div would */
overflow: auto;
/* or what you want, but good practice to have it */
border: solid 1px black;
}
a:hover,
a:focus,
a:active {
border: solid 1px red;
}
<a href='www.google.com'> www.google.com </a>
Remember to use more than a color change on your hover or the 1 in 12 males with color blindness won't see a thing, potentially, happening. The focus and active additions are for accessibility too. Especially focus is very important for keyboard users.
Good luck.
We can simply assign inherit value to all the CSS properties of anchor tag ,
Thus when you hover above its container DIV element , it will inherit all the new properties defined inside DIV:hover.
div {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
height: 100px;
width: 100%;
color: white;
background: blue;
}
a {
text-decoration: inherit;
color: inherit;
}
div:hover {
color: orange;
}
<div>
www.google.com
</div>
I've searched but couldn't find anything relating to this problem I'm having.
I have been trying to work this out for ages now but can't seem to do it. I have a div which has text and an image in it. I want all text and background within the div to change color when I hover anywhere within the div. I have made it so that the text at the bottom changes, along with the background color, but can't seem to get the top text (h4) to change color.
It changes color when I hover directly over the h4 element but not when I hover anywhere within the div.
The link below is a rough example of what I want to achieve. There is seperate styling on the CSS of the h4 tag so can't make it a p like the rest. That would be the easiest way to do this but unfortunately they must stay different.
This is my CSS style
.container {
text-align: center;
}
.container h4 {
text-align: center;
color: black;
}
#project1 {
text-align: center;
color: white;
background-color: white;
background-color: rgba(255,255,255,0.9);
color: black;
}
#project1:hover {
background-color: blue;
color: white;
}
#project1 h4:hover {
color: white;
}
#project1 h4 {
text-transform: uppercase;
}
a {
text-decoration: none;
}
Is there any way to do this using CSS and not jquery/javascript? I'm new to Web Development so only know some HTML/CSS at present.
Thanks.
Tom
JSFIDDLE LINK
Change your CSS style from
#project1 h4:hover {
color: white;
}
To
#project1:hover h4 {
color: white;
}
JSFIDDLE DEMO
You can use
#project1 h4 {
color: inherit;
}
to make it inherit #project1's color.
Demo
You can nest h4 tag in p tag.
no need for #project1 h4:hover in CSS.
Demo Fiddle
I have a simple "fill the gaps" excercise in html. There are gaps, looking like this:
Earth closest star is _ _ _ _.
The gaps are not supposed to be fillable on the computer - the document is supposed to be printed with the gaps enpty. But they have a content so, when howered, answers may be checked.
I use border-bottom property to make the gaps. There is a text filled in the gaps but it is white, so the user only can see it on hover.
The CSS:
span.gap {
color: white;
border-bottom: 1px solid black;
}
span.gap:hover {
color: gray;
}
The HTML:
Stephen Hawking is famous for his research of <span class="gap">black holes</span>.
Stackoverflow only helps you if you ask <span class="gap">simple questions</span>.
Browser seems to fix the color from white to black, so the gap content is visible in the printed document. How should I hide the text then?
I cannot use the visibility property, because the border must be visible.
Of all of the image replacement techniques, there are a few that will work without adding extra elements. All of them will require setting a width on the span if you want it to appear inline.
http://jsfiddle.net/TZD84/
span.gap {
display: inline-block;
width: 8em;
white-space: pre;
overflow: hidden;
border-bottom: 1px solid black;
text-indent: 110%;
}
span.gap:hover {
color: gray;
text-indent: 0;
}
If you need to support older browsers, there's always the negative text-indent method
http://jsfiddle.net/TZD84/1/
span.gap {
display: inline-block;
width: 8em;
overflow: hidden;
border-bottom: 1px solid black;
text-indent: -10em;
}
span.gap:hover {
color: gray;
text-indent: 0;
}
You can use CSS media types to handle different display/media situations. I.e add something like this to your CSS:
#media print { .gap { /* add your styles */ }}
Also, in combination with this you could add a separate span that would display only for print. Like:
HTML:
Stackoverflow only helps you if you ask
<span class="gap">simple questions</span>
<span class="print-gap"></span>.
CSS:
span.gap, span.print-gap {
color: white;
border-bottom: 1px solid black;
}
span.gap:hover {
color: gray;
}
#media screen {
span.print-gap { display: none; }
}
#media print {
span.gap { display: none; }
span.print-gap { display: inline-block; width: 100px; }
}