CSS Rollovers: как сохранить размер «области попадания», когда скрытое изображение больше, чем область привязки - PullRequest
Новая
       4

CSS Rollovers: как сохранить размер «области попадания», когда скрытое изображение больше, чем область привязки

1 голос
/ 03 июня 2010

У меня есть небольшая проблема, и я не думаю, что то, что я хочу сделать, может быть достигнуто только с помощью чистого CSS, но я решил, что все равно спрошу.

По сути, у меня есть один DIV, который содержитэлемент с гиперссылкой, который меньше по размеру, чем его родительский DIV.Таким образом, в действительности у меня есть квадрат в квадрате с внутренним квадратом, являющимся «областью попадания».Когда я наводю курсор мыши на этот внутренний квадрат, я хочу, чтобы фон внешнего квадрата изменился.

Я знаю, что невозможно изменить фон родительского DIV на: hover, но я решил, что могу создать иллюзию этогопроисходит путем вложения скрытого изображения в якорь.Это прекрасно работает, пока я не хочу "скатиться".

Проблема в том, что я хочу, чтобы изображение исчезало, когда я покидаю область тега привязки, а не увеличенное скрытое изображение.Возможно ли это?

Для блага всех, я привел пример, демонстрирующий, что я имею в виду: 

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test Rollover</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="d1">
        <a href="#nogo">
            <b id="b1"></b>
            <b id="b2"></b> 
        </a>
    </div>
</body>

И css: 

#b1
{
width: 200px;
height: 200px;
top: 100px;
left: 100px;
background-color:aqua;
position: absolute;
    z-index: 100;
}
#b2
{
width: 400px;
height: 400px;
background-color:lime;
position: absolute;
display: none;
    z-index: 90;
}
#d1
{
width: 400px;
height: 400px;
background-color:fuchsia;
position: relative;
}
#d1 a:hover #b2
{
display: block; 
}

В этом примере я хочу, чтобы зеленый внешний квадрат исчезал, когда я покидаю границы скрытого внутреннего синего квадрата.

Ответы [ 2 ]

1 голос
/ 03 июня 2010

Я не думаю, что есть какой-либо способ сделать это, используя чистый CSS. Независимо от того, как вы нарезаете его, вы пытаетесь нацелиться на родителя элемента hovered, и даже если вы нашли взлом, он, вероятно, будет зависеть от браузера.

Лучшая рекомендация - определить базовый ролловер для постепенного ухудшения качества, а затем использовать JS, чтобы добавить класс для реального эффекта, который вы хотите.

0 голосов
/ 03 июня 2010

http://www.webdevout.net/test?0q&raw ↴ 

<!doctype html>
<html>
    <head>
        <title></title>
        <style>
#box {
    position: relative;
}
#back {
    width: 200px;
    height: 200px;
    padding: 100px;
    background: fuchsia;
}
a {
    display: block;
    width: 200px;
    height: 200px;
    background: aqua;
    position: relative;
}
span {
    display: none;
    position: absolute;
    background: lime;
}
a:hover 
span {
    display: block;
}
span.n {
    width: 400px;
    height: 100px;
    left: -100px;
    top: -100px;
}
span.e {
    width: 100px;
    height: 200px;
    right: -100px;
    top: 0;
}
span.s {
    width: 400px;
    height: 100px;
    left: -100px;
    bottom: -100px;
}
span.w {
    width: 100px;
    height: 200px;
    left: -100px;
    top: 0;
}
div.n, 
div.e, 
div.s, 
div.w {
    position: absolute;
    z-index: 1;
}
div.n {
    width: 400px;
    height: 100px;
    left: 0;
    top: 0;
}
div.e {
    width: 100px;
    height: 200px;
    left: 300px;
    top: 100px;
}
div.s {
    width: 400px;
    height: 100px;
    left: 0;
    top: 300px;
}
div.w {
    width: 100px;
    height: 200px;
    left: 0;
    top: 100px;
}
        </style>
    </head>
    <body>
        <div id="box">
            <div id="back">
                <a href="#">
                    <span class="n"></span>
                    <span class="e"></span>
                    <span class="s"></span>
                    <span class="w"></span>
                </a>
            </div>
            <div class="n"></div>
            <div class="e"></div>
            <div class="s"></div>
            <div class="w"></div>
        </div>
    </body>
</html>

Нет IE6 поддерживает , и, вероятно, не стоит использовать независимо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...