Hover effect... made larger

Hi... not the biggest web genius but know a little. I've set up a hover effect on some links to show a blue background when you roll over. The 'blue' surrounds the type pretty tight... the highlight colour surrounds the text above and below but not the sides. This may not make much sense but if i direct you to this site:
http://www.maaku87.co.uk/
... and tell you that when you hover over a link the surrounding grey box is a lot larger than the text. My hover effect doesn't produce a box as large as this. There is no colour bleed to the sides of the type just above and below.
Can anyone tell me how i can produce the same result as this site?
thanks

Add some padding, line-height, width in ems and display:block to your menu code.
<!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=iso-8859-1" />
<title>Vertical List Menu</title>
<style type="text/css">
#vertical li {
list-style: none;
font-size: 14px;
text-align:center; /* adjust as desired */
#vertical li a {
display: block;
text-decoration: none;
font-weight:500;
width: 8em; /* adjust as needed */
line-height: 3em; /* adjust as needed */
padding: 5px; /* adjust or omit */
/* optional borders & colors */
border: 1px solid #AAA;
background: #DDD;
color:#333;
/**menu style on mouse-over/focus**/
#vertical li a:hover,
#vertical li a:focus,
#vertical li a:active {
background: #666;
color: #FFF;
</style>
</head>
<body>
<h3>Vertical List Menu</h3>

<ul id="vertical">
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>
<li><a href="#">Item Three </a></li>
<li><a href="#">Item Four</a></li>
<li><a href="#">Item Five</a><li>
<li><a href="#">Item Six </a></li>
</ul> 
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Similar Messages

Is it possible to have a hover effect easing out on multiple images when hovering on others?

Im trying to use four small images to create a large image by using a hover effect. However when i hover over an image for instance 3 of 4, after hovering over 1 and 2, number 1's ease-out effects snaps back to the background image, rather than continuing to ease-out. Which i do not want. Is it possible to have numerous ease-out effects working at the same time? Using CSS.

Could you show us a bit more of what you've done so far?
I'm not sure I understand the desired result.
Can you put your files online somwhere?
Thanks

Trying to do this cool hover effect with CSS only...

I've got 'img' thumbnails that are sometimes positioned
absolutely,
sometimes relatively, but aren't individually contained in
anything, like so
<a href="#">
<img src="image1.png" width="100" height="150" border="0"
class="tn" />
</a>
<a href="#">
<img src="image2.png" width="100" height="150" border="0"
class="tn" />
</a>
Now, I've already brought up the limitations of PNG on IE
(namely, even if
you "fix" PNG support on IE, IE will flatten your alpha
channels and strip
the individual pixels' transparency levels before overriding
them with a
single common attribute). This limitation makes it impossible
for me to do a
simple 90%-to-100% hover effect to "highlight" the thumbnail
on mouseover.
Micha recommended placing normal a highlighted versions of
the same
thumbnail inside and outside the viewport, and swapping them
on mouseover.
However, that would double the amount of image data being
sent to the user.
So what I thought to do, instead, is superpose a standalone
PNG of a small
spotlight, OVER the original thumbnail, on hover. Because it
would be the
same PNG being superposed over each thumb being hovered over,
the amount of
image data being sent to the user wouldn't be all that
different.
Would I need javascript for this, or can it be done with CSS
only?
Again, it would be the same spotlight.png file being
superposed on images on
mouseover, and it wouldn't be a big deal if the image bled
over surrounding
images (it would actually make it look more real).
Thanks.

say wha???
--Nancy O.
Alt-Web Design & Publishing
www.alt-web.com
"Murray *ACE*" <[email protected]> wrote
in message
news:[email protected]...
> Nobody can disagree with that analysis, but a LOADING
page would do
nothing
> to help with this, doncha know?
>
> --
> Murray --- ICQ 71997575
> Adobe Community Expert
> (If you *MUST* email me, don't LAUGH when you do so!)
> ==================
>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
> ==================
>
>
> "Nancy O" <[email protected]> wrote in
message
> news:[email protected]...
> > Sprite images are a tad smaller in filesize than
the sum of their
> > individual
> > parts. As you say, Murray, it's marginal. But the
real *efficiency*
> > comes
> > from fewer server requests to load multiple images.
Once the sprite has
> > loaded, there is no perceivable delay on hover - as
there often is with
> > conventional image swapping. Finally, since the
substitution effect is
> > pure
> > CSS, there's no need for JavaScripts which can add
weight to a page.
> >
> >
> > --Nancy O.
> > Alt-Web Design & Publishing
> > www.alt-web.com
> >
> >
> > "Murray *ACE*"
<[email protected]> wrote in message
> > news:[email protected]...
> >> By their nature, sprites are larger
dimensionally than the individual
> >> images, so the savings would be marginal, I
think. What I mean by that
> >> is
> > a
> >> simple rollover sprite would be the same size
as the combined up and
over
> >> images, placed adjacent to each other, no?
> >>
> >> --
> >> Murray --- ICQ 71997575
> >> Adobe Community Expert
> >> (If you *MUST* email me, don't LAUGH when you
do so!)
> >> ==================
> >>
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
> >>
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
> >> ==================
> >>
> >>
> >> "Nancy O" <[email protected]>
wrote in message
> >> news:[email protected]...
> >> >< Micha recommended placing normal &
highlighted versions of the same
> >> > thumbnail inside and outside the viewport,
and swapping them on
> > mouseover.
> >> > However, that would double the amount of
image data being sent to the
> >> > user.>
> >> >
> >> > Not if you use a sprite. Have a look at
this CSS Sprite Demo.
> >> >
http://alt-web.com/CSS-Sprite-Demo.html
> >> >
> >> >
> >> > --Nancy O.
> >> > Alt-Web Design & Publishing
> >> > www.alt-web.com
> >> >
> >> >
> >> >
> >> > "Mike" <[email protected]> wrote in
message
> >> > news:[email protected]...
> >> >> I've got 'img' thumbnails that are
sometimes positioned absolutely,
> >> >> sometimes relatively, but aren't
individually contained in anything,
> > like
> >> > so
> >> >> :
> >> >>
> >> >> <a href="#">
> >> >> <img src="image1.png" width="100"
height="150" border="0"
class="tn"
> > />
> >> >> </a>
> >> >> <a href="#">
> >> >> <img src="image2.png" width="100"
height="150" border="0"
class="tn"
> > />
> >> >> </a>
> >> >>
> >> >> Now, I've already brought up the
limitations of PNG on IE (namely,
> >> >> even
> >> >> if
> >> >> you "fix" PNG support on IE, IE will
flatten your alpha channels and
> >> >> strip
> >> >> the individual pixels' transparency
levels before overriding them
with
> > a
> >> >> single common attribute). This
limitation makes it impossible for me
> >> >> to
> >> >> do
> >> > a
> >> >> simple 90%-to-100% hover effect to
"highlight" the thumbnail on
> >> >> mouseover.
> >> >>
> >> >> Micha recommended placing normal a
highlighted versions of the same
> >> >> thumbnail inside and outside the
viewport, and swapping them on
> >> >> mouseover.
> >> >> However, that would double the amount
of image data being sent to
the
> >> > user.
> >> >>
> >> >> So what I thought to do, instead, is
superpose a standalone PNG of a
> >> >> small
> >> >> spotlight, OVER the original
thumbnail, on hover. Because it would
be
> > the
> >> >> same PNG being superposed over each
thumb being hovered over, the
> > amount
> >> > of
> >> >> image data being sent to the user
wouldn't be all that different.
> >> >>
> >> >> Would I need javascript for this, or
can it be done with CSS only?
> >> >>
> >> >> Again, it would be the same
spotlight.png file being superposed on
> > images
> >> > on
> >> >> mouseover, and it wouldn't be a big
deal if the image bled over
> >> > surrounding
> >> >> images (it would actually make it look
more real).
> >> >>
> >> >> Thanks.
> >> >>
> >> >>
> >> >
> >> >
> >>
> >
> >
>

CSS mouseover image hover effect in iWeb?

I've been trying to create an image hover effect when placing the mouse over an image or clicking on the image on my website made in iWeb. The only problem is that the HTML widget doesn't allow the image hover effect to only activate when the mouse is over the widget and not the image. If anyone know some simple code I could put into my website's HTML file, it would be great. It actually doesn't have to be a hover effect, the image just has to change on mouseover.
My website is temporarily located here: http://dl.dropbox.com/u/19707357/Website/Chocoa/tavlen.html

I referred you to that page to see if the effect was what you wanted! The examples use javascript.
You originally asked for CSS and its better to use this since the browser only has to load one image instead of two.
Here's an example of a rollover using CSS and a sprite...
http://www.iwebformusicians.com/iweb-snippets/sprite.html

Hover effect not shown in design view

Is there a setting that will allow me to see the hover effect I created in CSS? The cursor doesn't even turn to a hand so I imagine that cursor effects probably don't work either.
Is there a setting or something so I can see them? Right now I open Homesite and view it there.
I also noticed that Ctrl+B doesn't make selected text bold/strong nor Ctrl+I italic. Is that another setting?
I love Dreamweaver because it hjas enhanced some Homesite stuff but the things it dropped are frustrating.
Thanks for your help!

To see rollovers, hover effects, etc.. you need to save your page (Ctrl+S) and Preview in Browser.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Hover effect without it actually being a link?

I have some text that displays more text when you click on
it, and FAQ script. To help users know that it will do something I
wanted to make it act like the other links on my page that bold
when you mouse over them. I achieved this by putting a # for a link
location. Worked great but then I realized that its now refreshing
the page bumping you up to the top and loosing your spot.
Is their away to to get the hover effect without it actually
being a link?
http://www.ewdcorp.com/services_environment.html

"c-fqgy" <[email protected]> wrote in
message
news:fqrsg8$t82$[email protected]..
> Hi Tierry,
> Well that?s disappointing to hear! I actually tried
working with your
> script
> when I first went looking for an FAQ style toggling menu
but at the time I
> couldn't get it to work. I think at the time it was just
intimidating to
> me
> because I didn't fully get it. Since working with this
other script,
> through
> trial and error I think I have a better grasp of how it
works and reading
> your
> article seems far more straight forward (not that it
wasn't before).
> Anyways I
> will take your suggestion and hopefully be able to fix
my error.
>
> Just to be clear though, do you mean I should reconsider
my sites
> construction
> because I have surrounded it with extra formatting crap
or is it actually
> the
> way the actual Javascript that I have in my head tags
that isn?t correct?
To be honnest with you I don't know about your site
construction, I only
peeked at your DT, that's why I pasted the following in my
previous post:
<dt class="text_body" style="cursor: pointer;">
<span style="font-family: monospace;"></span>
<img width="11" height="8" alt=""
src="images/Bullet.jpg"/>
<u>
<a href="#">Contaminated Site Remediation Design and
Management</a>
</u>
</dt>
The inline styles and the empty span are not "elegant", but
that's ok. The
problem is that a DT cannot contain a UL and a UL cannot be
LI-free.
Also, you have BR elements between your DTs/DDs if I recall
and that's not
kosher either.
Thierry
Articles and Tutorials:
http://www.TJKDesign.com/go/?0
Keep your markup *clean* with these DW extensions and
scripts:
http://www.divahtml.com/products/scripts_dreamweaver_extensions.php

Mouse hover effect issue

I real like the picture hover effect on the template site.
http://www.templatemonster.com/flash-templates/28092.html
But I don't ability to create a same one.
Please give some advance.

Can we give hover effect to image in html file? actually i want to add 2 buttons with different background image that should act like a hover effect, i took help from many sites
http://www.wordpresstemplates.net/
Thanks in adv.
Syed

Hover Effect Follows My Mouse Everywhere After it's Loaded

Hi,
I've created the hover effect in a movie clip (called
characters_mc) and placed it on another movie clip (main_mc) and
this main_mc is placed on my main timeline. I would like the hover
effect to display only on the characters_mc but the hover effect
applies to everything else on the scene (when the characters_mc is
loaded). The hover effect follows my mouse after the characters_mc
is loaded.
Here is the AS I have placed on the main_mc:
b1.onRollOver = function() {
_root.captionFN(true, "pick me!", this); //display the
function (true) or to hide the function (false)
this.onRollOut = function() {
captionFN(false);
b2.onRollOver = function() {
_root.captionFN(true, "Hi!", this);
this.onRollOut = function() {
captionFN(false);
b3.onRollOver = function() {
_root.captionFN(true, "Get Jac'd Up!", this);
this.onRollOut = function() {
captionFN(false);
b4.onRollOver = function() {
_root.captionFN(true, "Boo!", this);
this.onRollOut = function() {
captionFN(false);
b5.onRollOver = function() {
_root.captionFN(true, "I'll be your guide", this);
this.onRollOut = function() {
captionFN(false);
b6.onRollOver = function() {
_root.captionFN(true, "Welcome!", this);
this.onRollOut = function() {
captionFN(false);
_root.captionFN = function (showCaption, captionText, bName)
if (showCaption) {
createEmptyMovieClip("hoverCaption",
this.getNextHighestDepth());
cap.desc.text = captionText;
cap._width = 7*cap.desc.text.length;
cap._alpha = 75;
if ((bName._width+bName._x+cap._width)>Stage.width) {
xo = -2-cap._width;
yo = -17;
} else {
xo = 2;
yo = -17;
hoverCaption.onEnterFrame = function() {
cap._x = _xmouse+xo;
cap._y = _ymouse+yo;
cap._visible = true;
} else {
delete hoverCaption.onEnterFrame;
cap._visible = false;
Any help would be greatly appreciated. I know other related
topics have been posted and I have read them, but nothing seems to
help my problem. Sorry if this seems redundant but I would really
appreciate any help or advice.
Thanks

Have you tried resetting the PMU?
The PMU (Power Management Unit) controls trackpad function, so resetting it often helps when the trackpad isn't working (or isn't working right).

Hover Effect in Top level navigation in Portal 7.3

Hi All,
We have achieved hover effect till 3 levels in Portal 7.3
We have tried to implement 4th level,but we are facing issue
Kindly help me to implement 4 level hover effect in portal 7.3 (EHP6).
Please find the attached CSS and JSP file for 3 level hovering and 4 level hovering in which we are facing the above issue.
Regards,
Sarita Agrawal

Hi Sarita,
I have pretty much followed your approach. But in the drop down top level navigation works wiredly & doesn't pick up the value as desired. I have similar need where the TLN has to be extended till 4 level, could you point me right direction where is it going wrong?
For 3-levels:
<ul>
    <nav:iterateInitialNavNodes>
       <li id='l0'>
             <nav:navNodeAnchor navigationMethod="byEPCM" />
                    <nav:ifNavNodeHasChildren>
                      <ul>
                        <nav:iterateNavNodeChildren>
                           <nav:ifNavNodeHasChildren>
                                       <li id='l1'>
                                               <nav:navNodeAnchor navigationMethod="byEPCM" />
                                                      <ul>
                                                    <nav:iterateNavNodeChildren>
                                                           <li id='l2'>
                                                                   <nav:navNodeAnchor navigationMethod="byEPCM"/>
                                                           </li>
                                                    </nav:iterateNavNodeChildren>
                                                </ul>.
                                        </li>
                           </nav:ifNavNodeHasChildren>
                           <nav:ifNotNavNodeHasChildren>
                                        <li id='l3'>
                                                  <nav:navNodeAnchor navigationMethod="byEPCM"/>
                                        </li>
                           </nav:ifNotNavNodeHasChildren>
                  </nav:iterateNavNodeChildren>
         </ul>
       </nav:ifNavNodeHasChildren>
        </li>
   </nav:iterateInitialNavNodes>
</ul>
Thanks and Regards,
Sumanth

Tutorial: Custom CSS and hover-effects in Adobe Muse CC

Hi everyone,
Today I figured out how to work with custom CSS in Muse, being able to apply styles to elements on the page according to their class names. In case it would help others, I've done a write up of how I did this with hover effects using the hover.css library. You can read the tutorial over on my Medium blog:
Tutorial: Hover effects in Adobe Muse
Hope someone finds it useful!

It's so cool

How do I create a "hover effect" in an Adobe Portfolio layout template?

I am trying to find/create as layout template for Adobe portfolio that can create a hover effect so when the reader hovers over a heading it display a list of pdf documents that are grouped under the heading and the reader can select which one to view.

Changing the functionality of the Portfolio layouts requires you to write an entirely new one using the Acrobat Portfolio SDK and Flex - or hiring someone to do it for you.

Changing list item limit has broken row hover effect

I have created a list and really like the way when you move your mouse of the an item the row highlights, the list I have has about 80 items and I wanted to show them all on the same page so I changed the item limit of the list to 80.
The problem is now the blue row hover effect is not working, how do I bring it back?

"tr" with the attribute of "ms-itmhover" (tr.ms-itmhover) looks like the best bet... especially because of its name.
When the item limit is 49 or below, the class for the tr is 'class="ms-itmHoverEnabled ms-itmhover"'. When 50 and over, the class is just 'class="ms-itmhover". So maybe a better solution is to use jQuery to find tr.ms-itmhover and
add ms-itmHoverEnabled.
Mike Smith TechTrainingNotes.blogspot.com
Books:
SharePoint 2007 2010 Customization for the Site Owner,
SharePoint 2010 Security for the Site Owner

Simple icon hover effect

Hi All,
I am using simple icon hover effects from codrops but they have limited icons ie i am using another font icon with same format but font is missing.
Please help for the same
WEBLINK
Reference LINK
Simple Icon Hover Effects | Codrops
http://astronautweb.co/snippet/font-awesome/

I don't know if this helps but on Line #9 of your HTML code, you have a <head> tag that belongs on line #3.
Nancy O.

I need to create a mouse hover effect on this map?

I need to create a mouse hover effect on this map.
Where the areas in (yellow or blue) will highlight or change color as the mouse lays on top. I have tried many things I dont seem to get it to work. Can someone help me?
Link: http://sawpm.businesscatalyst.com/plan-de-ventas.html

Hi there.
You'll need to place something on top of it and play with opacity.
- Imagine you have an inverted color version of your building A in a clipped-transparent PNG - it has to be the exact size, so it fitts nicely
- Then you put that PNG on top of your map on the exact location of your building A
- Convert it to a symbol
- Inside the symbol:
- Put a trigger at 0ms and 500ms with the following code: sym.stop();
- Create an animation (with your building A image) with, say, 250ms, were it begins at 125ms with 0% opacity and at the end - 375ms - with 100% opacity. Put a label in the begining (250ms) saying mouseover and another at the end (350ms) saying mouseout
- Click on the actions of the building A image (the one with the inverted color or something similar) and choose "mouseover". write the following code: sym.play('mouseover');
- Go to the actions again, choose "mouseout" and write the following code: sym.play('mouseout');
That's basically it.
pmfr

Hover effects

Hi
i was wondering how to hover effects in muse like this http://madewithadobemuse.com/adobe_muse_templates_and_themes
when you hover on a templete the price pops up .
thank you

Hi Rashid,
You will not be able to create the exact effect in Muse, you can re-create more or less the same thing using the Composition -> Tool tips, the only difference being, instead of sliding from below the pop-up will fade in/out.
- Abhishek Maurya

Hover effect... made larger

Similar Messages

Maybe you are looking for