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 8 years ago.
Improve this question
I can't figure out what I am doing wrong here! probably something really obvious. I am trying to change the background colour and font colour of a div on mouse hover using purely CSS/HTML
HTML:
<div id="cta">
Learn More >
</div>
CSS:
#cta {
width: 65px;
border: 1px solid #183073;
border-radius: 5px;
background-color: white;
color: #183073;
font-family: Arial;
font-size: 10px;
padding: 5px;
}
#cta:hover {
background-color: #183073;
color: white;
}
Thanks in advance!
Try to set the z-index of #cta to something large like 99999. If it works like that it means that you have another element covering your div and preventing the hover.
:hover will work for element of type A across Browsers.
Some browsers do not allow :hover to any DOM object and restricted only to Anchor.
Similar isssue is solved in
Hover effects not working with IE8
Related
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 have an HTML section that I am trying to alter with CSS:
<section class="jumbo">
<div class="container">
<h1>THIS IS THE TEXT CONTAINED WITHIN THE JUMBO</h1>
</div>
</section>
However the changes I make in my CSS file, such as changing the color of the text contained in the element are not having any affect:
#jumbo {
background-image: url("../images/carbon.jpeg");
background-position: center center;
min-height: 200px;
text-align: center;
}
#jumbo h1 {
color: white;
font-size: 45px;
padding-top: 15px;
line-height: 1.6em;
}
Do you have any tips for how I can debug an issue like this?
You have to use .jumbo.
More about CSS selectors: https://www.w3schools.com/cssref/css_selectors.asp
#jumbo is an id selector
you should use a class selector
.jumbo and .jumbo h1
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
How can I apply various effects, like increasing its size etc., using CSS to this arrow
https://jsfiddle.net/tnfLc58h/
So far I've been able to change its color.
HTML
<div class="down-arrow">
</div>
CSS
.down-arrow:after {
content:'\2193';
color: red;
}
edit: I want to make it responsive.
Since a pseudo element is an inline element, you need for example to give it display: inline-block (or block) for it to respond to width/height settings (though not if only to change font properties of course, as some comments assumed I meant).
.down-arrow:after {
content:'\2193';
display: inline-block; /* or block */
background: lightgray;
color: red;
height: 32px;
width: 40px;
font-size: 24px;
text-align: center;
}
<div class="down-arrow">
</div>
To increase the size of the content, you should set the font-size
Like so :
.down-arrow:after {
content:'\2193';
color: red;
font-size: 20px; // change to whatever
}
See updated EXAMPLE
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 7 years ago.
Improve this question
Hi there I was wondering how I would make an image appear when I hover over another one.
I have some code but it just isn't working I think it should be something like this;
CSS-
a bikeq
{
display: none;
}
a:hover bikeq {
display: block;
}
HTML-
<section class="r_img">
<img src="img/bike.png" class="bike">
<img src="bikeq_3.png" class="bikeq">
</section>
I fell like I am doing something wrong with the html part but I don't know what else to do.
Any help will be great thanks,
Zack
Keeping the HTML you have provided is not possible, as the elements are sibling. You can "fake" this effect with the following code:
<section class="r_img">
<img src="img/bike.png" class="bike">
<img src="bikeq_3.png" class="bikeq">
</section>
.bikeq {
display: none;
}
.r_img:hover .bikeq
{
display: block;
}
When hovering the container of the two images, the image with .bikeq class will show up..
Try this:
html
<section class="r_img">
<a href="" class=”bike_img”></a>
</section>
css
a.bike_img { width: ?px; height: ?px; display: inline-block; background: url("img/bike.png"); }
a.bike_img:hover { background: url("img/bikeq_3.png"); }
Where ?px are the width and height of your image. You will also need to make sure that your image urls are corrrect, I just had a guess.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Can anyone explain me, why <input> and <a> have different heights (while having same font, padding, margin and border settings) in Internet Explorer 9-11? Firefox and Chrome render them with the same height.
Here is example:
HTML
<input class="text" value="input"/>
<a class="text">button</a>
CSS
.text {
font-family: 'Arial';
padding: 7px;
font-size: 12px;
line-height: 1.4em;
border: 1px solid black;
display: block;
float: left;
width: 100px;
margin: 0;
}
And fiddle
Is there any way to prevent such behavior in IE? Thank you in advance.
There is a Question similar to this one which already got many answers and 18000 views.
I think you will find a solution to yours there too
CSS - Exact same height and alignment of button and input text box
Also you could just try to give both of them a height: XYpx so you can make sure they will always have the same heights. I guess giving them a height will also be better for your styling later on
I also found this Question on how to control the heights in different browsers
How can I control the height of text inputs and submit input buttons in different browsers?
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 3 years ago.
Improve this question
I have a div that refuses to change background colors when I hover over it. It stays the same. Here's the code.
HTML:
<div id="login"></div>
CSS:
#login {
position: fixed;
float: left;
background-color: none;
margin-left: 1.5%;
top: 1em;
height: 1.25em;
width: 7em;
text-align: center;
border-radius: .3em;
opacity: .5;
padding-top: 1em;
border: .18em solid gray;
}
#login:hover {
background-color: gray;
}
I had a similar problem. What I suggest is making sure there are no invisible objects over the div. This tells the program that your cursor is hovering the invisible object rather than the div with the hover element.
Works fine for me - http://jsfiddle.net/Q8A6d/
Which browser are you using? You cannot apply a
:hover
pseudo class to any elements other than <a> in older versions of IE (6 and below).
Your code appears to work properly here, so a few things could be wrong:
You might have linked your stylesheet to your HTML file improperly.
Some other CSS in the context of your project may be overriding the piece that you've given here.
You might be running into browser compatibility issues with the :hover selector or something else in your code that is breaking the styling.