Im having an issue having a link that when i hover it should display a div I have set up, the basic CSS looks like so,
#adiv {
max-height: 50px;
max-width: 50px;
z-index: 5;
display: none;
background-color: red;
}
#a:hover + #adiv {
display: block;
}
#a:hover {
color: white;
}
"#a" is a basic anchor element and lights up white when hovered as my code suggests, when i turn "#adiv" display back to block manually I can see the red square, really not sure what could be disrupting it from showing. I can post the HTML if required, I have it also on codepen http://codepen.io/Keiffy101/pen/aOWJZa any assistance appreciated, I'm a bit of an amature as it seems it should be straight forward.
thanks Keiffy101
#a:hover + #adiv {
display: block;
}
This will not work as it assume that #a is a direct sibling of #adiv...in other words that #adiv immediately follows #a in your HTML....and it doesn't.
In fact, given your current HTML structure, there is no way for hovering over #a to affect #adiv as the two elements do not share a common parent.
30 CSS Selectors to Memorize
Related
I have a text on which when you hover (or when you click on it on mobile), a picture appear. I used this stackoverflow answer to make it work.
I'm now trying to make the picture change size automatically, so the picture fit both on mobile and computer.
a.hovertext1:after {
content: 'Text that appears before I hover.';
}
a.hovertext1:hover:after,
a.hovertext1:focus:after {
content: url(https://cdn.discordapp.com/attachments/1074330512925143102/1076897722075971675/5226579-le-drapeau-national-de-la-republique-federative-du-bresil-fond-d-ecran-du-drapeau-bresilien-avec-des-styles-de-degrade-d-ombre-gratuit-vectoriel.jpg);
display: block;
}
<a name="return1" id="return1"></a>
I know I need to add width:100%; somewhere in my code, but I have no idea where. I tried putting it in the a.hovertext1:focus:after{...} block, but it didn't do anything.
Hope someone can help me!
Is there any reason for which you want to use pseudo elements ? There is a different approach using simple display property on hover.
img {
display: none;
width: 100%;
}
a:hover + img {
display: block;
}
a:hover {
display: none;
}
Text that appears before I hover
<img class="img" src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" />
Also I suggest to use buttons instead of links. Buttons are used for actions that affect the website’s front-end; links are used for navigation and actions that don’t affect the website.
Is it possible to hide all letters after the first letter with CSS?
dt:not(::first-letter) {
display: none;
}
You can, but your CSS is wrong. The version below works (at least in Chrome). It makes the dt invisible, and defines an overrule for the first letter to make it visible again.
I tried the same with display too, but that doesn't work, as expected. visibility: hidden hides the content, but keeps the element in place, while display: none removes it from the flow, and makes it impossible for sub-elements (the first letter in this case) to become visible again.
I added a hover too, so you can hover the letter to see the rest of the dt.
dt {
visibility: hidden;
}
dt::first-letter {
visibility: visible;
}
/* Hover the first letter to see the rest */
dt:hover {
visibility: visible;
}
Hover to see the rest:
<dt>Lorum ipsum is a weird text</dt>
<dt>Foo bar</dt>
A side effect will be that the area that is covered by the text is still claimed. Maybe that is not an issue, but if it is you will need some other solution. One possibility is to make the font-size of the dt 0 too. That way, the text is so small that is claims no space. Won't help if it also contains images, of course.
Since it doesn't seem to work, here is the alternative using font-size. Less than ideal, but hopefully it will still solve your problem.
dt {
font-size: 0;
}
dt::first-letter {
font-size: 1rem;
}
/* Hover the first letter to see the rest */
dt:hover {
font-size: 1em;
}
Hover to see the rest:
<dt>Lorum ipsum is a weird text</dt>
<dt>Foo bar</dt>
I think you can try this:
.twitter{
display: block;
color: transparent;
}
.twitter:first-letter{
color: #000;
}
<div id="socialMedia">
<a class="twitter">Twitter</a>
</div>
<div id="socialMedia">
<a class="twitter">Google</a>
</div>
See also this fiddle
You cannot use :not with pseudo element selector (see this).
What you can do is thinking in another way: transparent-ize the whole thing, then color with ::first-letter. Because the latter has higher specificity, it will override the transparent setting, thus achieve the result you want.
An alternative based on Waruna's answer, using color instead of layout-based attributes. Main advantage is that it works on every browser I tested (Firefox, Chrome and M$ Edge, but should probably work on all browsers), and it does not cause any visual glitches (like the "baseline jumping a pixel" from the second solution of the accepted answer), since it uses a completely visual attribute.
The issue with your original CSS is that you cannot use pseudo-elements (::blah) inside :not. You have to expand it into the inverse logic so you do not need the :not
dt {
color: transparent;
}
dt::first-letter {
color: black;
}
/* For testing */
dt:hover {
color: black;
}
<dt>Hello World!</dt>
a bit late to the party but i found this solutuùion that may help someone
width: 1ch;
overflow: hidden;
It may not work for every font but it should. It is perfect for monospace as ch is the size of the O letter in a font, so if your first two letters are shorter than O it will work fine, otherwise you may have to tweak it a bit.
Change the ch and you can have the first 2, 3, 4 .... letters :)
Try this....
.newline1::first-letter {
font-size: 200%;
color: #8A2BE2;
}
.newline2::first-letter {
/*color: transparent;*/
font-size: 0px;
}
<div class="newline1">
Test Stackoverflow.com
</div>
<div class="newline2">
Test Stackoverflow.com
</div>
.newline1::first-letter {
font-size: 200%;
color: #8A2BE2;
}
.newline2::first-letter {
color: transparent;
}
<div class="newline1">
Test Stackoverflow.com
</div>
<div class="newline2">
Test Stackoverflow.com
</div>
Using CSS, is there any way to show a div which is there inside an li element? i don't wanna use any javascript for this.
here is my sample code for this.
<ul>
<li id="help">
Help
<div id="helpContainer">
This is the help text content
</div>
</li>
</ul>
CSS
#helpContainer
{
display:none;
}
here it is, i wanna display helpContainer div on click of li(id=help)
As I mentioned in the comments. You can use :target.
Or if you want to go without :target .
#helpContainer{
float: left;
display:none;
position: absolute;
padding-top: 20px;
top: 10px;
}
#help:active #helpContainer{
display: block;
}
#helpContainer:hover{
display: block;
}
I made a little demo for that.
http://jsbin.com/eyavuw/1/
(source code) http://jsbin.com/eyavuw/1/edit
DEMO DEMO2 DEMO3
#helpContainer {
display: none;
}
li#help:hover div#helpContainer{
display: block;
}
li#help:target div#helpContainer{
display: block;
}
jsFiddle DEMO
Here's a CSS3 method that hides Help until it's needed.
To view the hidden Help, click the resize widget seen at the bottom right corner and drag down vertically.
CSS3:
.help{
background-color: lightblue;
width: 200px;
height: 25px;
min-height: 25px;
line-height: 25px;
max-height: 50px;
resize: vertical;
overflow: hidden;
}
.helpContainer {
background-color: yellow;
color: red;
}
CSS is for styling, so, you can use it to manipulate DOM elements, for that, you will need Javascript.
You must use Javascript to manipulate the DOM (Document Object Model) of the page.
This article describes how to use the #anchor tag coupled with the puesdo-class :target CSS selector (http://reference.sitepoint.com/css/pseudoclass-target). This doesn't really do what you want though (you would have to use an anchor tag to hit new # tags to put the page in different states whereas with Javascript you could just assign a listener to the onclick event on the object you actually care about), and I would never use this in practice.
I am trying to do a little optimization on my website and it has brought me to what seems to be a quite common topic but I haven't been able to find a problem quite like mine.
What I had. A image sprite (foggy/clear) and text on top of it. When you hovered over the image it could become clear, when you hovered over the text it would highlight and turn blue. (The image would remain clear)
What I want. To reduce the sprite into one image (rather than two in one), as it is the largest file on my main page and 57% of my load time is spent on images.
What I have done:
1) Gone from a sprite to just one clear image.
2) Created a new 'foggy-img' div container, placed it on top of the image, white with opacity: 0.15
3) Created a new div 'img-text' container for the text to put it outside the 'foggy-img' so the opacity doesn't effect it and have got it nicely place where it should be.
The Problem: It is small, the see-through box has replaced the sprite nicely and works. The text also highlights nicely. But. When one hovers over the text the see-through box becomes 'foggy' again.
Is there any way to keep the 'foggy-box' clear when hovering over the text which is in a separate div?
The HTML:
<div id="photo-feature">
<a href="services.html">
<div id="img">
<div id="photo-fog"></div>
<div id="photo-text"><h3>Learn More...</h3></div>
</div>
</a>
</div>
The CSS:
#photo-feature a { text-decoration: none; }
#photo-feature #img { margin: 4px 5px 0 4px; width: 565px; height: 283px; background: url(images/photo-feature.png) 0 0; }
#photo-feature #img #photo-fog { height: 100%; background-color: #fff; opacity: 0.15; }
#photo-feature #img #photo-fog:hover { opacity: 0; }
#photo-feature #img #photo-text { position: absolute; margin-top: -34px; margin-left: 428px;}
#photo-feature #img #photo-text h3 { float: left; display: inline; color: #fff; }
#photo-feature #img #photo-text h3:hover { color: #0066cc; text-decoration: underline; }
You could use adjacent siblings selector.
(further details)
It doesn't work in older browsers though (guess which).
You would have to swap the ordering of your HTML a bit. Basically put the text first then use something like this:
#photo-text:hover + #photo-fog { // Do something
Right now you'd not be able to set the hover on the H3, but why not just style up the h3 rather than the #photo-text element then it would work fine.
Edit: Beautifully colour co-ordinated js fiddle for you to take a look at: http://jsfiddle.net/will/Gt8KX/
Hope that helps :)
I have a CSS rule like this:
a:hover { background-color: #fff; }
But this results in a bad-looking gap at the bottom on image links, and what's even worse, if I have transparent images, the link's background color can be seen through the image.
I have stumbled upon this problem many times before, but I always solved it using the quick-and-dirty approach of assigning a class to image links:
a.imagelink:hover { background-color: transparent; }
Today I was looking for a more elegant solution to this problem when I stumbled upon this.
Basically what it suggests is using display: block, and this really solves the problem for non-transparent images. However, it results in another problem: now the link is as wide as the paragraph, although the image is not.
Is there a nice way to solve this problem, or do I have to use the dirty approach again?
Thanks,
I tried to find some selector that would get only <a> elements that don't have <img> descendants, but couldn't find any...
About images with that bottom gap, you could do the following:
a img{vertical-align:text-bottom;}
This should get rid of the background showing up behind the image, but may throw off the layout (by not much, though), so be careful.
For the transparent images, you should use a class.
I really hope that's solved in CSS3, by implementing a parent selector.
I'm confused at what you are terming "image links"... is that an 'img' tag inside of an anchor? Or are you setting the image in CSS?
If you're setting the image in CSS, then there is no problem here (since you're already able to target it)... so I must assume you mean:
<a ...><img src="..." /></a>
To which, I would suggest that you specify a background color on the image... So, assuming the container it's in should be white...
a:hover { background: SomeColor }
a:hover img { background-color: #fff; }
I usually do something like this to remove the gap under images:
img {
display: block;
float: left;
}
Of course this is not always the ideal solution but it's fine in most situations.
This way works way better.
a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
text-decoration: none;
border: 0 none;
background-color: transparent;
}
No cumbersome classes that have to be applied to each image. Detailed description here:
http://perishablepress.com/press/2008/10/14/css-remove-link-underlines-borders-linked-images/
Untested idea:
a:hover {background-color: #fff;}
img:hover { background-color: transparent;}
The following should work (untested):
First you
a:hover { background-color: #fff; }
Then you
a:imagelink:hover { background-color: inherit; }
The second rule will override the first for <a class="imagelink" etc.> and preserve the background color of the parent.
I tried to do this without the class="", but I can't find a CSS selector that is the opposite of foo > bar, which styles a bar when it is the child of a foo. You would want to style the foo when it has a child of class bar. You can do that and even fancier things with jQuery, but that may not be desirable as a general technique.
you could use display: inline-block but that's not completely crossbrowser. IE6 and lower will have a problem with it.
I assume you have whitespaces between <a> and <img>? try removing that like this:
<a><img /></a>
I had this problem today, and used another solution than display: block thanks to the link by asker. This means I am able to retain the link ONLY on the image and not expand it to its container.
Images are inline, so they have space below them for lower part of letters like "y, j, g". This positions the images at baseline, but you can alter it if you have no <a>TEXT HERE</a> like with a logo. However you still need to mask the text line space and its easy if you use a plain color as background (eg in body or div#wrapper).
body {
background-color: #112233;
}
a:hover {
background-color: red;
}
a img {
border-style: none; /* not need for this solution, but removes borders around images which have a link */
vertical-align: bottom; /* here */
}
a:hover img {
background-color: #112233; /* MUST match the container background, or you arent masking the hover effect */
}
I had the same problem. In my case I am using the image as background. I did the following and it resolved my problem:
background-image: url(file:"use the same background image or color");