Скрытие блока с блоками

[фонарик]

Придумал как решить свою задачу с тенями вокруг кнопок, но уперся в другую беду, которую так и не смог решить самостоятельно. Суть такая, что есть блок (серый), в нем лежит блок что чуточку поменьше размерами (синий). При наведении на синий блок он становится зеленым, при зажимании мышки - красным, при отпускании или уведении мышкой - обратно синим. Подскажите, как при помощи javascript сделать так, чтобы при нажимании на синенький блок серый блок - исчезал из виду? А при отпускании мышки - серый снова становился виден? При этом чтобы синенький блок где сидел чтобы там и оставался.

Что я только не пробовал. Если делать серому display:none то всё, он пропадает с концами, прихватив с собой и синий блок. Если серому сменить класс - то эта сволочь улезает в угол экрана и вообще происходят такие сдвиги, что плохо становится

http://jsfiddle.net/6hu2W/6/

[McLotos]

Я не понимаю звчем всё это делать через блоки, да ещё и при помощи JS, всё это можно реализовать просто оформление ссылок одним CSS

[lexxcode]

А так не проще сделать??? http://jsfiddle.net/alexriz/sAy8u/

[фонарик]

Нет, так не проще, потому что у меня за кнопкой идет картинка Нужно как-то придумать чтобы серый блок исчезал из виду. Вместо всех цветов идут картинки. Пытался блоку серому подменить класс - единственное наверно как можно решать проблему. Т.е сменяем класс блоку, в новом классе все тоже самое что и в старом - но картинка в диве = прозрачность. Но при смене класса серому блоку он уезжает в край и всё тут

Я не понимаю звчем всё это делать через блоки, да ещё и при помощи JS, всё это можно реализовать просто оформление ссылок одним CSS

Все дело в тени вокруг кнопки, она плавная и большая, красивая В эксплорере сделать тень закругленную вокруг кнопки у меня так и не вышло. Нашел советы в интернете, там какие-то фильтры применяются, огород какой-то. Я тот вариант не осилил. Edited February 5, 2013 by фонарик

[McLotos]

=)

Можно для нормальных бразуеров всё сделать в css, а специально для IE, тень просто нарисовать и подкладывать куда нужно. Вариант?

Правда учитывая "очень высокую скорость" IE, с картинкой он будет работать ещё "быстрее", чем другие браузеры.

Может всё-таки покажете код, а я подскажу как можно сделать =)

[фонарик]

Может всё-таки покажете код, а я подскажу как можно сделать =)

Дело в простой кнопке которая на фоне картинки, и всего лишь Смотреть там пока больше не начто, да и, лучше наверно на это не смотреть чем смотреть

Слева - вид кнопки в хроме и мозилле, справа - в эксплорере(8).

.btn {

border-radius:16px;

width:95px;

height:35px;

background-color:#9999CC;

box-shadow: 0 0 22px red;

}

Я и так в стилях запутался, если еще для каждого объекта который по плану должен быть с тенью определять отдельный стиль для эксплорера, то капут настанет. Да и вообще у меня не получилось сделать в эксплорере такой же вид кнопке как слева. Если что-то не правильно отображается, то это почему-то именно эксплорер

Edited February 5, 2013 by фонарик

[McLotos]

ну вот. для нормальных браузеров делается это так:

a:link{}

a:active{}

a:visited{}

a:hover{}

- 4 состояния ссылки, ну при желании можно сделать и current - текущая

так вот, для всех делается это кодом, а для IE эта самая тень сохраняется как отдельная картинка тени, png с прозрачностью, и добавляется к нужным состояниям ссылки. Я об этом уже говорил. =)

Edited February 5, 2013 by McLotos

[0nline]

Все просто.

для большого блока:

<div id="big">
<div class="small" onclick="HideBig()">
...
</div>
</div>

Это Javascript:

HideBig ()
{document.getelementbyid('Big').style.bgcolor='rgba(192,192,192,1)'}

Аналогичную процедуру нужно будет написать для момента поднятия кнопки мыши. Только нужно заменить 'rgba(192,192,192,1)' на 'rgba(192,192,192,0)'

Edited February 5, 2013 by 0nline

[фонарик]

так вот, для всех делается это кодом, а для IE эта самая тень сохраняется как отдельная картинка тени, png с прозрачностью, и добавляется к нужным состояниям ссылки. Я об этом уже говорил. =)

Ситуация такая, что в данном примере кнопки на картинке - ее состояние не изменится на стиль hover если навести мышкой не на саму кнопку, а на ее тень. А в случае если эта тень часть картинки и, как следствие - лежит внутри блока div, то лишь только мышка налезет на тень - кнопка примет стиль hover. Тень большая широкая, кнопка уже издалека реагирует, визуально это очень плохо смотрится.

Это Javascript:

HideBig ()
{document.getelementbyid('Big').style.bgcolor='rgba(192,192,192,1)'}

Почему-то не работает Вот видимость (visibility) менять получилось, но пропадают так же и синий блок, плюс ко всему, при отжатии мышки ничего назад не появляется. Почему исчезает синий блок и почему не появляется назад серый? Подскажите пожалуйста.

http://jsfiddle.net/6hu2W/8/

Edited February 5, 2013 by фонарик

[фонарик]

Решил проблему при помощи style.backgroundPosition

[McLotos]

а область реагирования кнопки можно настроить через width и height параметров самой ссылки.

Вот например часть моего css кода, ну там ещё правда на каждое состояние прописано кучу кода. чтобы визуально создать форму кнопки (градиенты и т.д.), так вот в этом примере кнопки реагируют только если наведёшь именно не неё, а не на тень или фон. =)

#menu a:link{
color:#ffffff;
font-size:15px;
text-decoration:none;
padding: 4px 7px;
width:160px;
display:block;
font-weight:bold;
}
#menu a:active{
color:#ffffff;
text-decoration:none;
padding: 4px 7px;
width:160px;
display:block;
font-weight:bold;
}
#menu a:visited{
color:#ffffff;
text-decoration:none;
padding: 4px 7px;
width:160px;
display:block;
font-weight:bold;
}
#menu a:hover{
color:#ff0000;
font-size:20px;
text-decoration:none;
padding: 4px 7px;
width:160px;
display:block;
font-weight:bold;
}

[0nline]

так вот, для всех делается это кодом, а для IE эта самая тень сохраняется как отдельная картинка тени, png с прозрачностью, и добавляется к нужным состояниям ссылки. Я об этом уже говорил. =)

Ситуация такая, что в данном примере кнопки на картинке - ее состояние не изменится на стиль hover если навести мышкой не на саму кнопку, а на ее тень. А в случае если эта тень часть картинки и, как следствие - лежит внутри блока div, то лишь только мышка налезет на тень - кнопка примет стиль hover. Тень большая широкая, кнопка уже издалека реагирует, визуально это очень плохо смотрится.

Это Javascript:

HideBig ()
{document.getelementbyid('Big').style.bgcolor='rgba(192,192,192,1)'}

Почему-то не работает Вот видимость (visibility) менять получилось, но пропадают так же и синий блок, плюс ко всему, при отжатии мышки ничего назад не появляется. Почему исчезает синий блок и почему не появляется назад серый? Подскажите пожалуйста.

http://jsfiddle.net/6hu2W/8/

Извиняюсь, я ошибся. Нужно двойные кавычки ставить в обращении к цвету.