4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Question About Those "Highlighted Text" Effect On Some Sites

by himybaby
3 replies
Hi,

So sorry that I have to post this 'design question' here as I think there is quite low activity in the design section.

Here goes...
____________________________

I'm green when it comes to web design, please help.

There are sites with words where whenever my mouse goes to the text, there will be a rectangular highlight on the text.

Example, the top black bar of:
russell brunson dotcomsecrets site

(sorry, I'm not able to put the .com in because I was told I can only do so only after 15 posts. It is dotcomsecrets followed by .com)
The words - Home , Products, Coaching... get highlighted when mouse touches it.

How do I create that effect? (simple html? or requires more than html?)

Thanks!
#effect #highlighted text #question #sites
  • Profile picture of the author Dan C. Rinnert
    It can be done with CSS or JavaScript.

    On the site you listed, it appears to be done in CSS.
    Signature

    Dan's content is irregularly read by handfuls of people. Join the elite few by reading his blog: dcrBlogs.com, following him on Twitter: dcrTweets.com or reading his fiction: dcrWrites.com but NOT by Clicking Here!

    Dan also writes content for hire, but you can't afford him anyway.
    {{ DiscussionBoard.errors[3022516].message }}
    • Profile picture of the author himybaby
      Yes from the looks of it, they do have real good programmers to do it.

      Is there an 'easy' html way of doing it?

      Anyone?
      {{ DiscussionBoard.errors[3022543].message }}
      • Profile picture of the author lotsofsnow
        Here is how they did it:



        <div id="navbar">
        <ul>
        <li><a href="http://www.dotcomsecrets.com" class="home">home</a></li>
        <li><a href="http://www.dotcomsecrets.com/dotcomsecrets-products/" class="products">products</a></li>
        <li><a href="http://www.dotcomsecrets.com/dotcomsecrets-coaching/" class="coaching">coaching</a></li>
        <li><a href="http://www.dotcomsecrets.com/success-stories/" class="success">success stories</a></li>

        <li><a href="http://www.dotcomsecrets.com/media-page/" class="media">media</a></li>
        <li><a href="http://www.dotcomsecrets.com/local-chapters/" class="local">local chapters</a></li>
        <li><a href="http://www.dotcomsecrets.com/affiliate-program/" class="affiliate-program">affiliate program</a></li>
        <li><a href="http://university.dotcomsecrets.com/forum" class="affiliate-program">Tribe</a></li>
        <li><a href="http://www.customerhelpdesk.org" class="contact">contact us</a></li>
        </ul>

        </div>



        and the style sheet looks like this for the navbar:

        #navbar ul{
        list-style: none;
        margin: 0;
        padding: 8px 0 0 10px;
        }
        #navbar ul li{
        float: left;
        display: inline;
        margin: 0 6px 0 0;
        padding: 0;
        }
        #navbar ul li a:link, #navbar ul li a:visited{
        display: block;
        color: white;
        font-size: 14px;
        text-decoration: none;
        font-weight: bold;
        font-family: arial, tahoma, sans-serif;
        text-transform: capitalize;
        padding: 7px 10px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        }
        #navbar ul li a:hover{
        color: #1a3c56;
        background: #eef2f7 url(../images/hover.png) repeat-x;
        }


        The part that you asked about is here:

        #navbar ul li a:hover{
        color: #1a3c56;
        background: #eef2f7 url(../images/hover.png) repeat-x;
        }

        You can find all this out by looking at the source code of a web site.
        Signature

        Call Center Fuel - High Volume Data
        Delivering the highest quality leads in virtually all consumer verticals.

        {{ DiscussionBoard.errors[3022737].message }}

Trending Topics