/    Sign up×
Community /Pin to ProfileBookmark

Hover effects for fieldsets?

Copy linkTweet thisAlerts:
Nov 30.2005

Is it possible to have mouseover effects for fieldsets?

to post a comment
HTML

15 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangNov 30.2005 — Yes, show what you have tried to do.
Copy linkTweet thisAlerts:
@Bubble__5authorNov 30.2005 — We tried to apply the effects like you do for cells of a table, but it didn't work. We're just learning about mouseover effects now so this is a good project for us. Hopefully we can use CSS ?







.
Copy linkTweet thisAlerts:
@FangNov 30.2005 — It works.
Copy linkTweet thisAlerts:
@Robert_WellockNov 30.2005 — Pseudo :hover but don't expect it to work on old browsers.
Copy linkTweet thisAlerts:
@Bubble__5authorNov 30.2005 — It works.[/QUOTE]
Well that gives me hope, but not help on how to achieve it ?
Copy linkTweet thisAlerts:
@FangNov 30.2005 — [URL=http://www.webdeveloper.com/forum/showthread.php?p=472362#post472362]Read your threads[/URL]
Copy linkTweet thisAlerts:
@Bubble__5authorNov 30.2005 — We did, just in a different order ? The floating part now works so thank you very much for that, but it has caused another problem, which is the padding now doesn't work ? Also the mouseover part of the code does not work.
Copy linkTweet thisAlerts:
@Bubble__5authorNov 30.2005 — Pseudo :hover [/QUOTE]
Hi Robert ? I will be visiting your web site a lot as I am also trying to learn how to correctly use XHTML ?

Do we just add [B]:hover[/B] to the .fieldset CSS? How do we set the color? I was thinking that it would be more like:

[code=html] onmouseover="this.className='#FFFFFF';" onmouseout="this.className='#000000';" [/code]

Because that's how our other table cells are set up. Thanks.
Copy linkTweet thisAlerts:
@FangDec 01.2005 — onmouseover="this.style.color='#FFF';
Read the tutorials again!
Copy linkTweet thisAlerts:
@Bubble__5authorDec 01.2005 — Hi Fang. I was able to figure it out but I don't think it's going to work because it also adds the hover to the legend and the area above the fieldset. We just wanted the fieldset to have the effect.
Copy linkTweet thisAlerts:
@FangDec 01.2005 — If you show your code and explain in more detail what you are trying to do, we can help.

At the moment it's guesswork.
Copy linkTweet thisAlerts:
@Bubble__5authorDec 01.2005 — [code=html]<fieldset class="fieldset" style="display:inline; padding:10px; margin:10px"><legend align="center">Controls:</legend>
<if condition="$post['editlink']">
<a href="$post[editlink]" name="vB::QuickEdit::$post[postid]"><img src="$stylevar[imgdir_button]/edit.gif" alt="$vbphrase[edit_delete_message]" border="0" /></a>
</if>
<if condition="$post['forwardlink']">
<a href="$post[forwardlink]"><img src="$stylevar[imgdir_button]/forward.gif" alt="$vbphrase[forward_message]" border="0" /></a>
</if>
<if condition="$post['replylink']">
<a href="$post[replylink]" rel="nofollow"><img src="$stylevar[imgdir_button]/<if condition="$post['forwardlink']">reply_small<else />quote</if>.gif" alt="$vbphrase[reply_with_quote]" border="0" /></a>
</if>
<if condition="$show['quickreply'] AND !$show['threadedmode']">
<a href="$post[replylink]" rel="nofollow" id="qr_$post[postid]" onclick="return false"><img src="$stylevar[imgdir_button]/quickreply.gif" alt="$vbphrase[quick_reply_to_this_message]" border="0" /></a>
</if>

<if condition="$show['moderated']">
<img src="$stylevar[imgdir_misc]/moderated.gif" alt="$vbphrase[moderated_post]" border="0" />
</if>
</fieldset>[/code]

The legend messes up the effect. If you remove the legend it works correctly, but then of course there's no legend, which we kind of wanted to use ?
Copy linkTweet thisAlerts:
@FangDec 01.2005 — You must specify the color for legend as well. Unfortunately the background color spills over the outline of the fieldset in IE. There is no easy fix for this if legend is used.&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;Basic HTML&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;style type="text/css"&gt;
.over {
color:#9cf;
background:#ff0;
}
fieldset {
display:inline;
padding:10px;
margin:10px
}
fieldset, .out {
color:#9c0;
background:#f00;
}
legend {
color:#fff;
background:#000;
}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;fieldset onmouseover="this.className='over';"onmouseout="this.className='out';"&gt;
&lt;legend align="center"&gt;Controls:&lt;/legend&gt;
&lt;a href="#"&gt;xxxx&lt;/a&gt;
&lt;a href="#"&gt;xxxx&lt;/a&gt;
&lt;/fieldset&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@Bubble__5authorDec 01.2005 — Thanks for all of the help Fang, I truely appreciate it ?

How I got around the problem with the legend is I didn't use one, and moved the legend information inside the fieldset. I will play around with your code tonight to see if I can learn more about fieldsets. Thanks ?
Copy linkTweet thisAlerts:
@Bubble__5authorDec 02.2005 — Fang ([I]or anyone else who might know[/I]) do you know if it's possible to have the fieldsets [B]'line' or 'border'[/B] ([I]vs. the inside of the fieldset[/I]) have a onmouseover effect? ?
×

Success!

Help @Bubble__5 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...