Почти меню, при наведении на блок, показывает другой блок

iillyyaa2 · May 14, 2011

Идея думаю будет понятна из кода, вот только как заставить не падать блоки вниз ?

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

Сделать такое на яве делов 5 минут, вот только интересует вариант на CSS, или такое не возможно ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
div {
	border: 1px solid;
	display:block;
}
.m1 , .m2 , .m3 {
	float: left;
	width:50px;
	height:50px;
	position: relative;
	border: 1px;
}
.s1 , .s2 , .s3 {
	display:none;
	position: relative;
	clear:both;
	width:200px;
	height:200px;
}
.m1:hover  + .s1 {
	display:block;
}
.m2:hover +  .s2 {
	display:block;
}
.m3:hover +  .s3 {
	display:block;
}
</style>

<div class="m1">m1</div>
<div class="s1">s1</div>

<div class="m2">m2</div>
<div class="s2">s2</div>

<div class="m3">m3</div>
<div class="s3">s3</div>
<div style="position:absolute;clear:both;border: 0px;"></div>

Edited May 14, 2011 by iillyyaa2

psywalker · May 14, 2011

Идея думаю будет понятна из кода, вот только как заставить не падать блоки вниз ?

Ты сам виноват, зачем ты обрубаешь блокам обтекание? Вот поэтому последующие блоки и падают вниз. Значит смотри, делаем так:

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div {
        border: 1px solid;
        display:block;
}
.m1 , .m2 , .m3 {
        float: left;
        width:50px;
        height:50px;
        position: relative;
        border: 1px;
}
.s1 , .s2 , .s3 {
        display:none;
        position: relative;
        clear: both;
        width:200px;
        height:200px;
}
.m1:hover  + div + div + .s1 {
        display:block;
}
.m2:hover + div + div +.s2 {
        display:block;
}
.m3:hover + div + div + .s3 {
        display:block;
}
</style>

</head>

<body>	
<div class="m1">m1</div>
<div class="m2">m2</div>
<div class="m3">m3</div>

<div class="s1">s1</div>
<div class="s2">s2</div>
<div class="s3">s3</div>
<div style="position:absolute;clear:both;border: 0px;"></div>
</body>
</html>

iillyyaa2 · May 14, 2011

Огромное спасибо, не додумался я, разместить блоки так... и "прыгать через несколько"

Edited May 14, 2011 by iillyyaa2

psywalker · May 14, 2011

Огромное спасибо, реально тупанул там

Давай, не тупи больше смотри

iillyyaa2 · May 14, 2011

упростил твой код, оказалось ещё проще...

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div {
        border: 1px solid;
        display:block;
}
.m {
        float: left;
        width:50px;
        height:50px;
        position: relative;
        border: 1px;
}
.s {
        display:none;
        position: relative;
        clear: both;
        width:200px;
        height:200px;
}
.m:hover  + div + div + .s {
        display:block;
}

</style>

</head>

<body>  
<div class="m">m1</div>
<div class="m">m2</div>
<div class="m">m3</div>

<div class="s">s1</div>
<div class="s">s2</div>
<div class="s">s3</div>
<div style="position:absolute;clear:both;border: 0px;"></div>
</body>
</html>

iillyyaa2 · May 14, 2011

всё великолепно, ie и ff работает на ура, а вот в хроме никакой реакции... в чём может быть дело ?

Gaspode · May 15, 2011

Хром некорректно соседние селекторы обрабатывает.

.m:hover  + div + div + .s {
        display:block;
}

Сюда, в вашем случае, в хроме попадают все элементы с классом .s - возможно, дело в этом.

psywalker · May 15, 2011

Хром некорректно соседние селекторы обрабатывает.
.m:hover  + div + div + .s {
        display:block;
}
Сюда, в вашем случае, в хроме попадают все элементы с классом .s - возможно, дело в этом.

Нет, просто у Хрома проблемы именно с ховер-эффектом. А то, про что ты пишешь, они вылечили в последней версии. А вот с ховер храмает.

iillyyaa2 · May 15, 2011

скорее всего проблема с селекторами, ибо

.s:hover {
	border: 1px solid;
}

обрабатывается нормально, а вот с селекторами засада

и вот такой код срабатывает в хроме:

.m:hover  + .s {
        display:block;
}

<div class="m">m1</div>
<div class="s">s1</div>

больше 2 селекторов не хочет обрабатывать...

может можно как то переработать мой код в первом посте ?

вот так не работает:

.m:hover + div + .s {
        display:block;
}

<div class="m">m1</div>
<div class="dd">ssdd</div>
<div class="s">s1</div>

а вот так глючит (что бы сработало нужно именно с соседнего дива заехать и что бы убралось вывести мышку нужно через соседний див)

div:hover + div + div {
        display:block;
}

<div class="m">m1</div>
<div class="dd">ssdd</div>
<div class="s">s1</div>

какая то жесть

данный код опять же работает везде кроме хрома:

.m:hover ~ .s {
        display:block;
}

реально что то они напортачили...

Edited May 15, 2011 by iillyyaa2

psywalker · May 15, 2011

Думаю мысль ясна?

<!DOCTYPE HTML>
<html lang="en-US">
<head>
                <meta charset="UTF-8">
                <title></title>
                <style type="text/css">
                                .tab-list {
                                        padding: 35px 0 0;
                                        overflow: hidden;
                                        list-style: none;
                                        margin: 0;
                                }
                                .tab-btn {
                                        -webkit-transition: all 0.3s ease-in;
                                        transition: all 0.3s ease-in;
                                        -o-transition: all 0.3s ease-in;
                                        -moz-transition: all 0.3s ease-in;
                                        border-radius: 10px 10px 0 0;
                                        -moz-border-radius: 10px 10px 0 0;
                                        -webkit-border-radius: 10px 10px 0 0;
                                        -o-border-radius: 10px 10px 0 0;
                                        float: left;
                                        margin: -34px 10px 0 0;
                                        height: 24px;
                                        padding: 5px;
                                        border: 1px solid #000;
                                        border-width: 1px 1px 0;
                                        cursor: pointer;
										background: #fff;
                                }
                                :target .tab-btn {
                                        position: relative;
										height: 15px;
										margin: -25px 10px 0 0;

                                }
                                .tab-content {
                                        display: none;
                                        float: right;
                                        width: 100%;
                                        margin: 0 0 0 -100%;
										position: relative;
										z-index: 1;
										background: #fff;
                                }
								.tab-c { position: absolute; z-index: 0; left: 8px; top: 43px; width: 100%;}
                                .tab-frame {
                                        border: 1px solid #000;
                                        border-radius: 0 0 10px 10px;
                                        -moz-border-radius: 0 0 10px 10px;
                                        -webkit-border-radius: 0 0 10px 10px;
                                        -o-border-radius: 0 0 10px 10px;
                                        padding: 20px 5px 10px;
                                }
								.active { display: block;}
								:target .tab-content  { display: block;}

                </style>
</head>
<body>
        <ul class="tab-list">
                <li class="tab-holder" id="tab1">
                        <a class="tab-btn" href="#tab1">tab 1</a>
                        <div class="tab-content">
                                <div class="tab-frame">
                                        text 1
                                </div>
                        </div>
                        <div class="tab-c">
                                <div class="tab-frame">
                                        text 1
                                </div>
                        </div>
                </li>
                <li class="tab-holder" id="tab2">
                        <a class="tab-btn" href="#tab2">tab 2</a>
                        <div class="tab-content">
                                <div class="tab-frame">
                                        text 2
                                </div>
                        </div>
                </li>
        </ul>
</body>
</html>

iillyyaa2 · May 15, 2011

<div class="tab-c">
                                <div class="tab-frame">
                                        text 1
                                </div>
                        </div>

это лишний код ? или зачем он ? не пойму...

psywalker · May 15, 2011

<div class="tab-c">
                                <div class="tab-frame">
                                        text 1
                                </div>
                        </div>

это лишний код ? или зачем он ? не пойму...

Да не важно, я тебе привёл пример, а ты вычти из него полезный урок.

iillyyaa2 · May 15, 2011

в ие8 не работает

хром и фф работает, а ie остался в стороне...

Edited May 15, 2011 by iillyyaa2

psywalker · May 15, 2011

в ие8 не работает
хром и фф работает, а ie остался в стороне...

Блин, ну вы даёте вообще все. А мозгами подумать религия не позволяет?

<!DOCTYPE HTML>
<html lang="en-US">
<head>
                <meta charset="UTF-8">
                <title></title>
                <style type="text/css">
                                .tab-list {
                                        padding: 35px 0 0;
                                        overflow: hidden;
                                        list-style: none;
                                        margin: 0;
                                }
                                .tab-btn {
                                        -webkit-transition: all 0.3s ease-in;
                                        transition: all 0.3s ease-in;
                                        -o-transition: all 0.3s ease-in;
                                        -moz-transition: all 0.3s ease-in;
                                        border-radius: 10px 10px 0 0;
                                        -moz-border-radius: 10px 10px 0 0;
                                        -webkit-border-radius: 10px 10px 0 0;
                                        -o-border-radius: 10px 10px 0 0;
                                        float: left;
                                        margin: -34px 10px 0 0;
                                        height: 24px;
                                        padding: 5px;
                                        border: 1px solid #000;
                                        border-width: 1px 1px 0;
                                        cursor: pointer;
										background: #fff;
                                }
                               .tab-holder:hover .tab-content{ display: block;}
                                .tab-content {
                                        display: none;
                                        float: right;
                                        width: 100%;
                                        margin: 0 0 0 -100%;
										position: relative;
										z-index: 1;
										background: #fff;
                                }

                                .tab-frame {
                                        border: 1px solid #000;
                                        border-radius: 0 0 10px 10px;
                                        -moz-border-radius: 0 0 10px 10px;
                                        -webkit-border-radius: 0 0 10px 10px;
                                        -o-border-radius: 0 0 10px 10px;
                                        padding: 20px 5px 10px;
                                }
								.active { display: block;}


                </style>
</head>
<body>
        <ul class="tab-list">
                <li class="tab-holder" id="tab1">
                        <a class="tab-btn" href="#tab1">tab 1</a>
                        <div class="tab-content active">
                                <div class="tab-frame">
                                        text 1
                                </div>
                        </div>
                 </li>
                <li class="tab-holder" id="tab2">
                        <a class="tab-btn" href="#tab2">tab 2</a>
                        <div class="tab-content">
                                <div class="tab-frame">
                                        text 2
                                </div>
                        </div>
                </li>
        </ul>

</body>
</html>

iillyyaa2 · May 15, 2011

psywalker, спос, идею понял, буду делать

psywalker · May 15, 2011

psywalker, спос, идею понял, буду делать

Вот, сразу бы так

iillyyaa2 · May 17, 2011

сделал, всё вроде хорошо... везде всё работает... а тут открыл из ie6 и расстроился :rolleyes:

не работает даже флоат:лефт...

вообще ничего не работает... один список в столбец (а не встрочку) и никакой реакции на мышку

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

<!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">

<style type="text/css">
.listHelpMenu {
	padding: 35px 0 0;
	list-style: none;
	margin: 0;
}
.HelpBtn {
	-webkit-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	float: left;
	margin: -33px 10px 0 0;
	height: 24px;
	padding: 5px;
	cursor: pointer;
}
.helpText {
	display: none;
	float: right;
	width: 100%;
	margin: 0 0 0 -100%;
	position: relative;
	z-index: 1;
}
.tabHelpMenu:hover .HelpBtn {
	height: 15px;
	margin: -24px 10px 0 0;
	position: relative;
}
.tabHelpMenu:hover .helpText{
	display: block;
}
</style>

<ul class="listHelpMenu">
	<li class="tabHelpMenu">
		<a class="HelpBtn" href="#tab1">tab 1</a>
		<div class="helpText">
			text 1
		</div>
	</li>
	<li class="tabHelpMenu">
		<a class="HelpBtn" href="#tab2">tab 2</a>
		<div class="helpText">
			text 2
		</div>
	</li>
</ul>

Edited May 17, 2011 by iillyyaa2

Gaspode · May 18, 2011

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

Он поддерживает :hover только для ссылок. Гуглите файлик csshover.htc, подключите его - и будет вам щаааааастье.

iillyyaa2 · May 18, 2011

Gaspode, не в этом дело.. где то ещё что то в коде, что не работает..

меню даже нормально не распологается... не отрабатывает флоат:лефт

да и ссылки как бы есть..

подключение csshover.htc никак ни на что не повлияло.

Edited May 18, 2011 by iillyyaa2

iillyyaa2 · May 18, 2011

Всё, разобрался...

.tabHelpMenu {
	display: inline;
}

исправило проблему с float:left

csshover.htc, решило проблему ховеров :rolleyes:

Всем спасибо.

getalusk · May 18, 2011

Мне кажется Хром тоже ругается.

iillyyaa2 · May 18, 2011

хром версии 11.0.696.65

нормально работает.

вот полностью рабочий код:

<!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">

<!--[if IE]>
<style type="text/css">
BODY { behavior:url("csshover.htc"); }
</style>
<![endif]-->

<style type="text/css">
.listHelpMenu {
	padding: 35px 0 0;
	list-style: none;
	margin: 0;
}
.tabHelpMenu {
	display: inline;
}
.HelpBtn {
	-webkit-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	-moz-transition: all 0.3s ease-in;
	float: left;
	margin: -33px 10px 0 0;
	height: 24px;
	padding: 5px;
	cursor: pointer;
}
.helpText {
	display: none;
	float: right;
	width: 100%;
	margin: 0 0 0 -100%;
	position: relative;
	z-index: 1;
}
.tabHelpMenu:hover .HelpBtn {
	height: 15px;
	margin: -24px 10px 0 0;
	position: relative;
}
.tabHelpMenu:hover .helpText{
	display: block;
}

</style>

<ul class="listHelpMenu">
	<li class="tabHelpMenu">
		<a class="HelpBtn" href="#tab1">tab 1</a>
		<div class="helpText">
			text 1
		</div>
	</li>
	<li class="tabHelpMenu">
		<a class="HelpBtn" href="#tab2">tab 2</a>
		<div class="helpText">
			text 2
		</div>
	</li>
</ul>

Sign In

Почти меню, при наведении на блок, показывает другой блок

Question

Link to comment

Share on other sites

21 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information