Forum Moderators: not2easy
CSS
.feature {display: block; text-decoration: none; height: 100px; width: 100px;}
.feature:hover {text-decoration: underline;}HTML
<a href="x.html" class="feature">
title<br>
<img src="y.jpg">text here
</a>
img#some-id {text-decoration: none;}Then that will keep the image from being underlined when the link is hovered. The only way I can think of to get the text to not underline is to put it outside the the link.
a {text-decoration: none}
a:hover {text-decoration: underline}
Let me know if you are still having problems.
...if I hover anywhere in the css block, whether on the title, picture or text, I would like for the title only to be underlined.
The text will also take on the hover behavior as well as the title - I can't see how you can get two different hover behaviors inside one anchor tag. You might get an effect like this with DHTML, but not with CSS alone.
[edited by: mckcd at 10:19 pm (utc) on April 19, 2003]
<style type="text/css">
<!--
.feature {display: block; height: 100px; width: 100px;}
.new {text-decoration: none;}
.new:hover {text-decoration: underline;}
.noline {text-decoration: none;}
-->
</style>
</head>
<body>
<a href="you" class="new">title<br>
<img src="y.jpg"><span class="noline">text here</span>
</a>
</body>
</html>
[edited by: mckcd at 10:25 pm (utc) on April 19, 2003]
I did not read you post properly!
The text will also take on the hover behavior as well as the title - I can't see how you can get two different hover behaviors inside one anchor tag. You might get an effect like this with DHTML, but not with CSS alone.
#feature:first-line {}Sinclair and mckcd: thx a lot for the input but it wasn't the precise solution to my problem.
Any other ideas guys?
a.new {text-decoration: none;}
a.new:hover {text-decoration: none;}
a.new:hover a.new:first-line {text-decoration:underline;}
I have doubts that we can use first-line to work on hover, because hover is also a pseudo class, just as first-line is a pseudo class. Even if code that combines two pseudo-classes is theoretically valid (which seems dicey to me) I'd be willing to bet that the current browsers won't execute it.
CSS:
div.feature { background-color:#ccc; height:100px; width:100px; }
a { text-decoration:none; }
div.feature:hover > a { text-decoration:underline; }
img { background-color:#f1f1f1; width:30px; height:30px; }
XHTML:
<div class="feature">
<a href="#">The Title<br />
<img src="x.jpg" alt="image" /></a>
The all-important plain text.
</div>
And just like all cool CSS effects, it works in Opera and Mozilla, but not IE.
I got the effect you wanted, but I had to move the (what I assume to be) description text outside of the link.
Very true, but there are reasons that I didn't mention in the example that make it important for the text to be inside the anchor tag. If everything fails I would probably need to find a work around for that and resort to your suggestion but I would like to explore options to keep the text in the same tag first.
I have doubts that we can use first-line to work on hover, because hover is also a pseudo class, just as first-line is a pseudo class. Even if code that combines two pseudo-classes is theoretically valid (which seems dicey to me) I'd be willing to bet that the current browsers won't execute it.
So far I haven't had any luck with using 2 pseudo-elements either. I am not very knowledgeable of css2, so I was hoping there would have been an answer there.
And just like all cool CSS effects, it works in Opera and Mozilla, but not IE.
Hmmm, just read that. Scratch my previous comment about resorting to that then :P
<script type="text/javascript">UnderlineTitleInThisDiv(){
document.getElementByID("title").style.textDecoration = "underline"
}
NoLineTitleInThisDiv(){
document.getElementByID("title").style.textDecoration = "none"
}
</script>
<div onmouseover="UnderlineTitleInThisDiv();" onmouseout="NoLineTitleInThisDiv();">
<div id="title">Title</div>
<img src="tingtang.png" />
Super Cool Text and Stuff
</div>
Thats the only cross-browser compliant way I know to do it (since IE is hover-unfriendly)
