MOUSE OVER EFFECTS

  Obi One Kenobi (without the Force) 18:29 25 Jun 08
Locked

Hi I’m using Ms FrontPage to build a website for work, I a novice to web designing so forgive me if this question sounds a bit stupid. Is there a way I can set mouse over effects only the ONCE so they perform the same effects on the whole page.

All I want the effect to do is change the selected word to bold and underline it, once the mouse has curser is removed it changes back to normal. I can do this through changing the behaviours of the selected word in FrontPage, however this is a long and laborious job.

I was told that I could do it by putting the code in the body or head of the html coding.

Not allowed to use Dreamweaver or any other web package.

cheers

  Kemistri 18:51 25 Jun 08

You need pseudo-classes, which are written in conjunction with HTML tags and other selectors in the CSS.

For links, you would add a pseudo-class -- "hover" in this instance -- to an "a" declaration. For non-linked highlighted words, you could wrap the word in a span and style it in much the same way.

Let's say that your chosen spans have been given a class called "underline":

span.underline:hover { text-decoration: underline; font-weight: bold; }

With pseudo-classes, the selector must be included even if you have used a class. Add that to your CSS, wherever that may be (external style sheet, style section in the head, etc.)

  Kemistri 12:29 26 Jun 08

Did that help?

sorry to say but, your advise was to complex for me, i did not understand half of your jargon e.g.pseudo-classes, span. i am a complete novice to web designing.

i am good at using pc and software and quite confident that i will pick up web designing in the near future, as for right now i need step by step guide, this there a web page on the net that shows how to do this.

I have found a few sites that say put this in the head/body of your html and it will create the mouse over text effects, but sadly i must be doing something wrong as nothing happens.

  Kemistri 22:06 26 Jun 08

As you mentioned in your first post that you don't know how to code, I took the trouble to spell it out as thoroughly as I could and give an example of the markup that you need to add to your style sheet or style section. There are no sources of which I'm aware that make it any easier than I did -- plenty that give less info.

If you buy a good CSS book, you should find pseudo-classes described pretty early on, so I would recommend that you spend a few pounds on some decent reference material.

Bearing in mind that this forum appears to randomly drop the left chevrons out of HTML, I will try to provide another example:

<p>Example text with <span class="underline">these words</span> placed inside a span.</p>

That's your HTML, OK? Now the style section (assuming that you are not using separate style sheets yet):

<head>
<title></title>
meta tags here
<style type="text/css">
span.underline:hover { text-decoration: underline; font-weight: bold; }
</style>
</head>

If that loses its left chevrons, their position should still be reasonably clear.

This thread is now locked and can not be replied to.

Nintendo Switch review: Hands-on with the intuitive modular console and its disappointing games…

1995-2015: How technology has changed the world in 20 years

This abstract video touches on division in our technologic world

Best alternatives to iTunes for Mac | Best music players for macOS: Free your music from the…