Hover Tab без Javascript

Question

Hover Tab без Javascript

0

Я могу создавать вкладки с использованием простого HTML и CSS. Соответствующий кодекс упоминается ниже:

<!DOCTYPE HTML>
<html>
<head>

<style>
div.tabbed {
    position: relative;
    font-size: 0;
}

div.tabbed > a {
    display: inline-block;
    padding: .5em;
    font-size: 16px;
    border-radius: 3px 3px 0 0;
    background-color: #333;
    color: #eee;
    text-decoration: none;
    line-height: 1em;
}

div.tabbed > a + a {
    margin-left: .5em;
}

div.tabbed > a:target {
    color: #333;
    background-color: #eee;
}

div.tabbed > a > div {
    position: absolute;
    top: 100%;
    left: 0;
    width: 300px;
    padding: .5em;
    border-radius: 0 3px 3px 3px;
    display: none;
    color: #333;
    background-color: #eee;
}

div.tabbed > a:target > div {
    display: block;
}
</style>

</head>
<body>

<div class="tabbed">
    <a href="#dog" id="dog">
        Dog h jh
        <div>
            <p>This is a dog...</p>
        </div>
    </a>
    <a href="#cat" id="cat">
        Cat
        <div>
            <p>This is a cat...</p>
        </div>
    </a>
    <a href="#foo" id="foo">
        Foo
        <div>
            <p>This is a foo...</p>
        </div>
    </a>
    <a href="#newshop" id="newshop">
        New Shop
        <div>
            <p>This is a New Shop...</p>
        </div>
    </a>
</div>
</body>
</html>

В настоящее время в событии click я могу видеть содержимое Tab. Можно ли получить такую же эффективность при наведении? [Пожалуйста, обратите внимание: я не использую javascript, простой HTML5 и CSS3].

Pawan Mude 16 дек. 2013, в 11:02

Источник

0

почему тег PHP? В любом случае, загляните в CSS3: try: hover.
Huey 16 дек. 2013, в 09:34

Теги:

html

html5

css3

hover

2 ответа

1

Заменить в CSS

div.tabbed > a:target с div.tabbed > a:hover
div.tabbed > a:target > div с div.tabbed > a:hover > div

Arthur Halma 16 дек. 2013, в 06:48

Ещё вопросы

почему тег PHP? В любом случае, загляните в CSS3: try: hover.

zai · Accepted Answer · 2013-12-16T08-05-00.000Z

Да, возможно. Проверьте вкладку наведения

div.tabbed > a:hover > div {
    display: block;
}