1

I have a tab design. that active tab identified by a down arrow. i want to create that arrow when i mouse hover only. i don't want place that arrow to all tabs. please reffer the below image. is it possible in css ( may be in after or before pseudo class ) or jquery.

enter image description here

Thanks.

Arul
  • 491
  • 1
  • 4
  • 14

4 Answers4

1

shape can added using :after and :before pseudo elements.

Praveen
  • 55,303
  • 33
  • 133
  • 164
  • by this property can add some plain text only. but i want add a tag. – Arul Nov 06 '13 at 09:50
  • 2
    @Arul [it is not possible to use html tags inside the `content`](http://stackoverflow.com/questions/3102259/css-content-text-how-do-i-add-tags). Incase if you want then you have to do either using jQuery or JS – Praveen Nov 06 '13 at 09:51
  • 1
    @arul; @user1671639 is right, you can use `:before` and `:after` and style them with to look like arrows. See the comments and link above by @nkmol – Dre Nov 06 '13 at 09:53
1

Personally I'm not sure about the capabilities of CSS, but it's definitely possible using JQuery .hover()

JS

$( "li.menu_item" ).hover(
 function() {
  $( this ).append( $( "<span class='arrow'></span>" ) );
 }, function() {
  $( this ).find( "span:last" ).remove();
 }
);

Look at http://api.jquery.com/hover/

Rohan Kumar
  • 40,431
  • 11
  • 76
  • 106
user2959229
  • 1,360
  • 2
  • 11
  • 21
1

As far as I can tell with css you can not append a new html element. You can write styles for a particuar tag,id or class.

You can already code an html structure with in the page(make it ,css-> display:none). on css events like :hover you can display:block it.

But in Jquery you can do it by the following methods.

Jquery before

Jquery After

or search for the .append() method

shams
  • 124
  • 10
1

Here is an example of how you could use the border-trick:

#menu
{
    height: 50px;
    width: 100%;
    border:1px solid #d0d0d0;
    /*gradient generator ftw*/
    background-image: linear-gradient(bottom, rgb(249,249,249) 45%, rgb(255,255,255) 72%);
    background-image: -o-linear-gradient(bottom, rgb(249,249,249) 45%, rgb(255,255,255) 72%);
    background-image: -moz-linear-gradient(bottom, rgb(249,249,249) 45%, rgb(255,255,255) 72%);
    background-image: -webkit-linear-gradient(bottom, rgb(249,249,249) 45%, rgb(255,255,255) 72%);
    background-image: -ms-linear-gradient(bottom, rgb(249,249,249) 45%, rgb(255,255,255) 72%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.45, rgb(249,249,249)),
        color-stop(0.72, rgb(255,255,255))
    );
}


#menu a
{
    height: 100%;
    width: 100px;
    position: relative;
    display: inline-block;
    text-align: center;
    line-height: 300%;
    text-decoration: none;
    color: #848484;
}

#menu a:hover
{
    color: black;
}

#menu a:hover:before
{
  content: '';
  position: absolute;
  bottom: -1px; 
  left: 40%;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid white;
  z-index: 1;
}

#menu a:hover:after
{
  content: '';
  position: absolute;
  bottom: -1px; 
  left: 40%;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 11px solid #d0d0d0;
}

The :after pseudo-class is the border of the arrow where the :before pseudo-class is the arrow itself.

As you can see the :after pseudo-class is just an other arrow that is beneath the :before pseudo-class. With the width 1px bigger, you can see it sticking out that will function as a border.

jsFiddle

nkmol
  • 8,025
  • 3
  • 30
  • 51