-
1. Re: Is there a "label" equivalent for <a> tags (not <input>)?
Ken Binney May 17, 2013 11:29 AM (in response to jyeager11)Not sure what "react" means, but can you wrap all three in a div with an ID or class to trigger your desired hover effect?
-
2. Re: Is there a "label" equivalent for <a> tags (not <input>)?
jyeager11 May 17, 2013 11:30 AM (in response to Ken Binney)No, they are too far away from one another in the page.
-
3. Re: Is there a "label" equivalent for <a> tags (not <input>)?
Nancy O. May 17, 2013 11:54 AM (in response to jyeager11)Use class="group" on the anchor tag. .group needs to be defined in your CSS and/or JavaScript function.
<a href="some_link.html" class="group">Link #1</a>
<a href="some_link.html" class="group">Link #2</a>
<a href="some_link.html" class="group">Link #3</a>
Nancy O.
-
4. Re: Is there a "label" equivalent for <a> tags (not <input>)?
jyeager11 May 17, 2013 11:57 AM (in response to Nancy O.)I'm not sure how applying the same class to 3 different anchor tags will get all 3 of them to react when only one of them has the cursor on it.
You understand what I'm trying to do, right? I'm trying to make 3 different anchor tags behave like there are 3 simultaneous cursors on them... when either of the 3 has the real cursor on it.
-
5. Re: Is there a "label" equivalent for <a> tags (not <input>)?
Jon Fritz II May 17, 2013 12:08 PM (in response to Nancy O.)Are you taling about a remote rollover?
Something where when you mouse over one link, it changes style and, at the same time, all the other links tied to it would also change style?
EDIT: This will do the trick with a little javascript. There's probably an easier way, this is just something I roughed together real quick...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function offclass(id)
{document.getElementById(id).className = 'class1';}
function onclass(id)
{document.getElementById(id).className = 'class2';}
</script>
<style type="text/css">
a.class1 {
color:green;
}
a.class2 {
color:red;
}
</style>
</head>
<body>
<a id="link1" class="class1" href="http://www.google.com" onmouseover="onclass('link1'); onclass('link2'); onclass('link3');" onmouseout="offclass('link1'); offclass('link2'); offclass('link3');">Google1</a>
<p> </p>
<a id="link2" class="class1" href="http://www.google.com" onmouseover="onclass('link1'); onclass('link2'); onclass('link3');" onmouseout="offclass('link1'); offclass('link2'); offclass('link3');">Google2</a>
<p> </p>
<a id="link3" class="class1" href="http://www.google.com" onmouseover="onclass('link1'); onclass('link2'); onclass('link3');" onmouseout="offclass('link1'); offclass('link2'); offclass('link3');">Google3</a>
</body>
</html>
-
6. Re: Is there a "label" equivalent for <a> tags (not <input>)?
jyeager11 May 17, 2013 12:15 PM (in response to Jon Fritz II)I'm not sure why people keep asking me what I'm trying to do. You know how the "label" tag can make an input button, and the text next to it, group together so that clicking one *OR* the other produces the same effect? (Like putting a little dot in the image of the radio button...)
Well, I'm asking if there's an equivalent tag for anchors. In other words, that 2 or more anchor tags are grouped in such a way that whatever I do to one -- be it mouseovering, or clicking -- the others in the same group react as if I was doing it to them.
Again, going back to the label tag : you can click a radio button, or you can click the text next to it provided the label tags match. The result will be the same. I can click the text -- not the radio button -- and yet the radio button will react like I clicked it. Because I clicked something else that had the same label.
I really don't know how I can explain it further. So if anyone STILL has any doubt about what I'm asking for, just skip this thread -- I can't explain it further.
The javascript code you provided probably does it, but it's too much code. Am I to assume, then, that CSS does not provide for an intuitive way to do what I'm trying to do on its own?
-
7. Re: Is there a "label" equivalent for <a> tags (not <input>)?
MurraySummers May 17, 2013 12:24 PM (in response to jyeager11)Short answer to your question is "no". There is no such tag as <label> that would work for anchor tags.
You can do what you want, however, with a bit of custom javascript which would dynamically change the class of distant anchor tags to one that mimics the hover style. I see that Jon has given you an example of how that might work. Why is that too much code?
And yes, you can assume that CSS doesn't give you an intuitive way to do what you want.
-
8. Re: Is there a "label" equivalent for <a> tags (not <input>)?
jyeager11 May 17, 2013 12:29 PM (in response to MurraySummers)I marked his solution as helpful, but what I was really trying to know was if there was an input label equivalent for anchor tags. And you just answered that question.
There's always a way to trick a website into doing what we want, especially through the use of javascript... but that wasn't the information I was looking for originally.
CSS evolves and allows us to do many things natively that we used to rely on scripting for (like transition effects). So before I went script-hunting, I wanted to know if there was now a way to do it natively with CSS only.
A legitimate question, right?
-
9. Re: Is there a "label" equivalent for <a> tags (not <input>)?
Jon Fritz II May 17, 2013 12:29 PM (in response to jyeager11)It can be done with css, but the code will end up longer than the javascript I gave you and won't work on non-css3 browsers
-
10. Re: Is there a "label" equivalent for <a> tags (not <input>)?
jyeager11 May 17, 2013 12:32 PM (in response to Jon Fritz II)How would it be done with CSS only? If the code ends up being longer than your script, then I would tend to think that it's another "exploit" or "trick" to fool the browser... and not a tag or attribute doing what it was meant to do (like the simple input label is).
-
11. Re: Is there a "label" equivalent for <a> tags (not <input>)?
Jon Fritz II May 17, 2013 12:47 PM (in response to jyeager11)Right, as I implied, there is no tag.
-
12. Re: Is there a "label" equivalent for <a> tags (not <input>)?
jyeager11 May 17, 2013 1:02 PM (in response to Jon Fritz II)Well, if you want to be technical about it, what you actually wrote was that there is probably an easier way, and that easier way is what I was after. Murray was a little bit clearer in that no easier way exists; more specifically, a CSS tag equivalent to "label" simply does not exist. Not "I don't know of one, but maybe it's out there" -- but a firm "it does not exist" and that is why I gave him the correct answer (sorry).
This being said, think of how much more useful the "label" tag would be if it worked on anchor tags. Throwing the idea out there in the universe!



