I cannot seem to get the CSS:hover working correctly.
I am trying to display a textbox that has the opacity set to 0 when you hover over "My Website". I have achieved something similar with an image but cannot get it working with just text.
I have tried a:hover and p:hover, both do not work.
<div class="site">
<p style="padding: 10px;">My Website</p>
<p id="siteText">This is my primary website where all the information you might require on me is available! This site is also a demonstration of my work; however, external reviews are available on the website!</p>
</div>
#siteText {
background-color: rgba(255,255,255,0.8);
text-align: center;
width: 475px;
padding: 15px;
position: absolute;
left: 50%;
opacity: 0;
transform: translate(-50%, -50%);
}
#Home a:hover + #siteText {
opacity: 1;
}
There are several fundamental issues with your markup.
You had the a element inside a p element then the siteText content. Therefore, the selector a:hover + #siteText could not work, because the a and #siteText were not immediate siblings.
In your CSS, you had #Home a:hover, where #Home was the a element. This should have been simply #Home:hover.
Some of your other styles for the #siteText (transform, position, etc) were causing it to appear off-screen, so I've removed them below to demonstrate the adjusted HTML / CSS works.
Also, I'd like to recommend that you not use ID's for things like this. Instead, think in a global fashion. That is, use a class / markup combination that is repeatable without having to keep adding more ID's to your CSS. In the example below, I changed from #siteText (ID) to a class of .tooltip - and, tweaked the CSS so that now, anytime you have an a element immediately followed by an element with the class of tooltip, you'll have a functioning hover effect.
Below is a working snippet:
.tooltip {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
width: 475px;
padding: 15px;
opacity: 0;
}
.pad-vertical {
display: inline-block;
padding: 10px 0;
}
a:hover + .tooltip {
opacity: 1;
}
<div class="site">
<div><a class="pad-vertical" href="myWebsite.html" id="Home">My Website</a>
<p class="tooltip">This is my primary website where all the information you might require on me is available! This site is also a demonstration of my work; however, external reviews are available on the website!</p>
</div>
</div>
Update
I've added some padding to the a element. NOTE that I've done this again through a class, so that you can use the class on a elements where you may want padding like this.
Related
I need to create a "record store". I'm very new to CSS and HTML and hardly know anything in JAVA. This is what I need to create.
When the user hovers over one of these featured records, move that record vertically lower and make it become larger. Also, display information about that record that was not previously visible.
Any help is helpful.
Use :hover.
Regarding the information you want to display, you could put them in another div with display: none and change it to display: block on hover using something like #record:hover #content {}.
<div id="record"></div>
#record {
width: 100px;
height: 100px;
background: grey;
}
#record:hover {
position: relative;
top: 10px;
width: 110px;
height: 110px;
}
https://jsfiddle.net/y5j8rhfL/1/
Try this instead
<div class = "record" ></div>
Now the HTML is ready
.record{
/* Whatever style you've applied here is fine */
transition-duration: .5s;
}
.record:hover{
transform: translateY(15px) scale(1.5);
}
The translateY(15px) is to move it down by 15px
While the scale(1.5) is to make it appear bigger
I’m leveraging Codrops’ slowly aging but still relevant ‘Inline Anchor Styles’ kit. Codrops’ original live demo can be found here. For my site, I’m using the ‘link-arrow’ theme.
I’ve got most of it to work as intended. My problem is that I can’t figure out how to make the longer anchor tagged web links to wrap to the next line.
Here is my reduced test case on CodePen, which also shows the HTML and CSS I am working with. When you are viewing that Pen, if you reduce the size of your browser window, you’ll notice that the very first web link is obscured and extends way over to the right beyond the boundary of the window. What I am trying to do is make the web links wrap to the next line (similar to the way the regular non-anchor tag <li> contents already do).
To further clarify what I am trying to accomplish, you can take a look at this screenshot on imgur. There are 4 red arrows pointing to the anchor tag contents which extend beyond the browser window.
How do you get the content inside the anchor tags to wrap to the next line?
After importing Codrops' HTML, CSS, and JS source code linked to above, these are the only modifications I've made:
body {
background: #f9f9f9;
width: 100%;
font-size: 133%;
margin: auto;
}
.box {
margin-left:-60px;
}
li {
line-height: 150%;
font-size: 1.2em;
padding-bottom: 15px;
}
ol {
margin: 0;
}
ol.dashed {
list-style-type: none;
}
ol.dashed > li {
text-indent: 5px;
}
ol.dashed > li:before {
content: "- ";
text-indent: 5px;
}
.container {
width:100%;
}
What I’ve tried:
I’ve tried adjusting width and max-width values from 100% progressively down to 50% for all the elements in play including the body, ol, li, a elements in addition to the classes in play such as .container and .box. No dice.
I have carefully checked your code on codepen and Codrops's Inline Anchor Styles.
I have found a very simple solution after analyzing your problem, there are two places where the code needs to be adjusted is:
this code code must not include line white-space: nowrap, it should be removed. When removing we need to setup after position of anchor from top: 0
And boom now we changed two snippset as follows:
section a {
position: relative;
display: inline-block;
outline: none;
color: #404d5b;
vertical-align: bottom;
text-decoration: none;
}
.link-arrow a::after {
left: 100%;
z-index: -2;
width: 1em;
background: #34495e url('./arrow_right.svg') no-repeat 50% 50%;
background-size: 60% auto;
text-align: center;
font-family: Arial, sans-serif;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
pointer-events: auto;
top: 0
}
Now Your Anchor tag will not be overflown again.
Based on #Umar_Ahmed's code snippet, I was able to reduce the solution down to this:
section a {
color: black;
text-decoration: none;
white-space: normal;
}
.link-arrow a::after {
pointer-events: auto;
top:0;
}
But I am giving full credit to Umar as the official answer to my question. ;)
Thank you Umar!
During my random testing I saw a behavior where I put an anchor tag inside another anchor tag. I made a jsfiddle.
<a class="groupPopper">
<a class="name"> content</a>
</a>
But in the developer tool it appears different:
I believe we cannot put an anchor tag inside another anchor tag as clicking on the inner anchor will bubble up the click event to the parent anchor tag which should not be allowed.
Is my assumption correct?
As #j08691 describes, nested a elements are forbidden in HTML syntax. HTML specifications do not say why; they just emphasize the rule.
On the practical side, browsers effectively enforce this restriction in their parsing rules, so unlike in many other issues, violating the specs just won’t work. The parsers effectively treat an <a> start tag inside an open a element as implicitly terminating the open element before starting a new one.
So if you write <a href=foo>foo <a href=bar>bar</a> zap</a>, you won’t get nested elements. Browsers will parse it as <a href=foo>foo</a> <a href=bar>bar</a> zap, i.e. as two consecutive links followed by some plain text.
There is nothing inherently illogical with nested a elements: they could be implemented so that clicking on “foo” or “zap” activates the outer link, clicking on “bar” activates the inner link. But I don’t see a reason to use such a structure, and the designers of HTML probably didn’t see one either, so they decided to forbid it and thereby simplify things.
(If you really wanted to simulate nested links, you could use a normal link as the outer link and a span element with a suitable event handler as the inner “link”. Alternatively, you could duplicate links: <a href=foo>foo</a> <a href=bar>bar</a> <a href=foo>zap</a>.)
Nested links are illegal.
Links and anchors defined by the A element must not be nested; an A
element must not contain any other A elements.
I had the same issue as #thinkbonobo and found a way to do it without JavaScript:
.outer {
position: relative;
background-color: red;
}
.outer > a {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.inner {
position: relative;
pointer-events: none;
z-index: 1;
}
.inner a {
pointer-events: all;
}
<div class="outer">
<div class="inner">
You can click on the text of this red box. It also contains a
W3C compliant hyperlink.
</div>
</div>
The trick is to make an anchor covering the whole .outer div, then giving all other anchors in the inner div a positive z-index value. Full credit goes to https://bdwm.be/html5-alternative-nested-anchor-tags/
you can use object tag to solve this problem.
such as
<a><object><a></a></object></a>
I stumbled upon this issue when trying to make a div panel clickable by also have buttons. The workaround that I recommend is to use javascript events.
Here is a codepen example I created....
http://codepen.io/thinkbonobo/pen/gPxJGV
Here's the html portion of it:
Example of link embedded in link....
<div class=panel onclick="alert('We\'ll hi-ii-ii-ide')">
If you say run<br>
<button onclick="app.hitMe(event)">more</button><br>
<br>
And if you say hide...<br>
</div>
Notice how the event for the inner link is captured and stopPropagation() is used. this is critical to make sure the outer trigger doesn't run.
It is invalid HTML.
You can't nest a elements.
So, by definition, the behaviour is undefined.
For nested anchors, to prevent the inner event from bubbling up to the outer event, you want to stop propagation as soon as the inner event is clicked.
OnClick of inner event, use e.stopPropagation();
I know It's an old post, but I want to point out that user9147812 answer worked better than any other of the suggestions.
This is how I stacked the whole thing.
<style>
* {
padding: 0;
margin: 0 border:0;
outline: 0;
}
.outer_anchor {
display: inline-block;
padding: 5px 8px;
margin: 2px;
border: 1px solid #252632;
border-radius: 3px;
background: #1c1d26;
color: #fff;
text-shadow: 0 1px 0 #616161;
box-shadow: 1px 1px 3px #000;
transform: translateY(0);
transition: background 250ms;
}
.inner_anchor {
display: inline-block;
padding: 5px 8px;
margin: 2px;
border: 1px solid #252632;
border-radius: 3px;
background: #1c1d26;
color: #fff;
transform: translate(0px);
}
.inner_anchor:hover {
background: #647915;
}
</style>
ItemX<object><a class="elim_btn" href="#" title='Eliminate'>×</object></a>
Don't do it like that. I was facing the same issue in my app.
You can simply add <div> tag in top and <a> tags at child level.
something like:
<div id="myDiv">
</div>
make sure you add click event for myDiv in your script file as well.
window.location.href = "#dashboardDetails";
You cannot nest 'a' tags. Instead set outer container as 'position:relative' and second 'a' as 'position:absolute' and increase its z-index value. You'll get the same effect.
<div style="position:relative">
<img src="image-1.png">
<a style="position:absolute;top:0;z-index:99" href="page1.php"></a>
</div>
.outer {
position: relative;
background-color: red;
}
.outer > a {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.inner {
position: relative;
pointer-events: none;
z-index: 1;
}
.inner a {
pointer-events: all;
}
<div class="outer">
<div class="inner">
You can click on the text of this red box. It also contains a
W3C compliant hyperlink.
</div>
</div>
This is a bad way of coding but you can try this -
aaaa <table><tr><td><a href="2">bbbb </td></tr></table> </a>
During my random testing I saw a behavior where I put an anchor tag inside another anchor tag. I made a jsfiddle.
<a class="groupPopper">
<a class="name"> content</a>
</a>
But in the developer tool it appears different:
I believe we cannot put an anchor tag inside another anchor tag as clicking on the inner anchor will bubble up the click event to the parent anchor tag which should not be allowed.
Is my assumption correct?
As #j08691 describes, nested a elements are forbidden in HTML syntax. HTML specifications do not say why; they just emphasize the rule.
On the practical side, browsers effectively enforce this restriction in their parsing rules, so unlike in many other issues, violating the specs just won’t work. The parsers effectively treat an <a> start tag inside an open a element as implicitly terminating the open element before starting a new one.
So if you write <a href=foo>foo <a href=bar>bar</a> zap</a>, you won’t get nested elements. Browsers will parse it as <a href=foo>foo</a> <a href=bar>bar</a> zap, i.e. as two consecutive links followed by some plain text.
There is nothing inherently illogical with nested a elements: they could be implemented so that clicking on “foo” or “zap” activates the outer link, clicking on “bar” activates the inner link. But I don’t see a reason to use such a structure, and the designers of HTML probably didn’t see one either, so they decided to forbid it and thereby simplify things.
(If you really wanted to simulate nested links, you could use a normal link as the outer link and a span element with a suitable event handler as the inner “link”. Alternatively, you could duplicate links: <a href=foo>foo</a> <a href=bar>bar</a> <a href=foo>zap</a>.)
Nested links are illegal.
Links and anchors defined by the A element must not be nested; an A
element must not contain any other A elements.
I had the same issue as #thinkbonobo and found a way to do it without JavaScript:
.outer {
position: relative;
background-color: red;
}
.outer > a {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.inner {
position: relative;
pointer-events: none;
z-index: 1;
}
.inner a {
pointer-events: all;
}
<div class="outer">
<div class="inner">
You can click on the text of this red box. It also contains a
W3C compliant hyperlink.
</div>
</div>
The trick is to make an anchor covering the whole .outer div, then giving all other anchors in the inner div a positive z-index value. Full credit goes to https://bdwm.be/html5-alternative-nested-anchor-tags/
you can use object tag to solve this problem.
such as
<a><object><a></a></object></a>
I stumbled upon this issue when trying to make a div panel clickable by also have buttons. The workaround that I recommend is to use javascript events.
Here is a codepen example I created....
http://codepen.io/thinkbonobo/pen/gPxJGV
Here's the html portion of it:
Example of link embedded in link....
<div class=panel onclick="alert('We\'ll hi-ii-ii-ide')">
If you say run<br>
<button onclick="app.hitMe(event)">more</button><br>
<br>
And if you say hide...<br>
</div>
Notice how the event for the inner link is captured and stopPropagation() is used. this is critical to make sure the outer trigger doesn't run.
It is invalid HTML.
You can't nest a elements.
So, by definition, the behaviour is undefined.
For nested anchors, to prevent the inner event from bubbling up to the outer event, you want to stop propagation as soon as the inner event is clicked.
OnClick of inner event, use e.stopPropagation();
I know It's an old post, but I want to point out that user9147812 answer worked better than any other of the suggestions.
This is how I stacked the whole thing.
<style>
* {
padding: 0;
margin: 0 border:0;
outline: 0;
}
.outer_anchor {
display: inline-block;
padding: 5px 8px;
margin: 2px;
border: 1px solid #252632;
border-radius: 3px;
background: #1c1d26;
color: #fff;
text-shadow: 0 1px 0 #616161;
box-shadow: 1px 1px 3px #000;
transform: translateY(0);
transition: background 250ms;
}
.inner_anchor {
display: inline-block;
padding: 5px 8px;
margin: 2px;
border: 1px solid #252632;
border-radius: 3px;
background: #1c1d26;
color: #fff;
transform: translate(0px);
}
.inner_anchor:hover {
background: #647915;
}
</style>
ItemX<object><a class="elim_btn" href="#" title='Eliminate'>×</object></a>
Don't do it like that. I was facing the same issue in my app.
You can simply add <div> tag in top and <a> tags at child level.
something like:
<div id="myDiv">
</div>
make sure you add click event for myDiv in your script file as well.
window.location.href = "#dashboardDetails";
You cannot nest 'a' tags. Instead set outer container as 'position:relative' and second 'a' as 'position:absolute' and increase its z-index value. You'll get the same effect.
<div style="position:relative">
<img src="image-1.png">
<a style="position:absolute;top:0;z-index:99" href="page1.php"></a>
</div>
.outer {
position: relative;
background-color: red;
}
.outer > a {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.inner {
position: relative;
pointer-events: none;
z-index: 1;
}
.inner a {
pointer-events: all;
}
<div class="outer">
<div class="inner">
You can click on the text of this red box. It also contains a
W3C compliant hyperlink.
</div>
</div>
This is a bad way of coding but you can try this -
aaaa <table><tr><td><a href="2">bbbb </td></tr></table> </a>
Here is my fiddle: http://jsfiddle.net/olexander/7hB8C/
I have an anchor, which is styled as a button (the styles are simplified to show the issue).
HTML:
Button
CSS:
.button {
border: none;
outline: none;
text-decoration: none;
display: inline-block;
}
.button:active {
transform: scale(0.8, 0.8);
-webkit-transform: scale(0.8, 0.8);
-moz-transform: scale(0.8, 0.8);
-o-transform: scale(0.8, 0.8);
-ms-transform: scale(0.8, 0.8);
}
.demo {
padding: 40px;
margin: 20px;
font-size: 5em;
color: black;
background-color: lightgray;
}
The issue is that there is a non-clickable area inside the link-button.
I can explain it that there is a text node inside the anchor, and when mousedown goes to the text node, after transform, mouseup comes outside the text node. That's why mouseclick is not processed.
If we select the text node inside the anchor, it can be visualized like this (before and after mousedown):
I would like to notice, that the issue is reproduced at least in Chrome, Opera and Safari, and even if I put a link to href tag instead of handling click event. It is also reproduced with <button>, and not the issue for <input type="button">, because the first one uses content, and the second value.
Does anyone have ideas about better ways to avoid or workaround this behavior? Thanks in advance!
UPDATE:
I found a solution using a streched "stub" <span> to override the clickable area:
<span class="stub"></span>Button
and the stub styles:
.button > span.stub {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
This version is published here: http://jsfiddle.net/olexander/7hB8C/20/
The stub can be added dynamically by javascript, but the idea remains the same.
Since the inline span element can be nested inside anchors and buttons, it doesn't break the W3C HTML5/XHTML5 rules.
And Aequanox made the solution perfect! Look at the answer below.
The whole story is published here: Animated anchor and button with css3
You could avoid inserting the tag, thus mantaining the markup cleaner, by inserting this in the css:
.button:before{
content:'';
position:absolute;
top:0; left:0; right:0; bottom:0;
}
The text will not be selectable though
It seems the :active transition is replacing the click event. I'd consider this a browser bug.
Here I've changed :active to a class name .active and apply is in your event handler:
$('#linkbutton').click(function(){
$(this).addClass('active');
$(this).delay(200).queue(function() { $(this).removeClass('active');})
$('#logContainer').append('<span>clicked </span>');
});
For some reason this didn't work until I changed .button from:
display: inline-block;
to:
float: left;
Go figure... It works now though.