a: hover приводит к исчезновению следующей ссылки в строке и двойному изображению над ссылкой, на которой находится мышь - PullRequest
Новая
       23

a: hover приводит к исчезновению следующей ссылки в строке и двойному изображению над ссылкой, на которой находится мышь

0 голосов
/ 08 ноября 2011

enter image description here Я пытаюсь сделать простой тест дизайна HTML / CSS. У меня есть пять ссылок в списке, они встроены. Я хотел получить эффект столбца, который растягивался на всю длину страницы, когда указатель мыши перемещался по ссылке. Так, например, если моя мышь находится над первой ссылкой 1399, текст для 1499 выглядит как двойное изображение над ссылкой 1399. Или, например, на изображении ниже 1699 не показывает. Это сработало, но, в основном. (Хотелось бы, чтобы был способ заставить столбец при наведении указывать позади других элементов в теле документа, я не думаю, что можно назначить атрибуты при наведении на z) ... Я заметил, что он делает текст из следующая ссылка исчезнет из того порядка, в котором она находится, и двойные изображения поверх ссылки, которую накрывает мышь.

это HTML 

<div id = box1>
<ul id=list1>
<li><a href>1399 </a></li>
<li><a href>1499 </a></li>
<li><a href>1599 </a></li>
<li><a href>1699 </a></li>
<li><a href>1799 </a></li>
<li><a href>1899 </a></li>
</ul>
</div>

это css 

a:link {
text-decoration:none;
color:#fff;
}

a:hover
{
color:#fff;
position:absolute;
background-color:blue;
opacity:0.5;
min-height:100%;
max-width: 70px;
//z-index: 1;
//top:0;
//left:0;
//right:0;
//bottom:0;
}

Ответы [ 3 ]

1 голос
/ 08 ноября 2011

Происходит то, что ваш position: absolute выводит <a> из потока (именно поэтому 1799 перемещается туда, где он был), а сам 1699 выталкивается за пределы экрана, потому что ваш min-height: 100%в результате чего он составляет <a> 100% от высоты экрана, но <a> начинается ниже верхней части высоты экрана.Я думаю, что вы можете достичь желаемого эффекта, заменив код hover следующим: 

a:hover {
    color:#fff;
}
a:hover:after
{
    content: '';
    display: block;
    position:absolute;
    background-color:blue;
    opacity:0.5;
    max-width: 70px;
    z-index: -1;
    top:0;
    bottom:0;
}

Единственное, я не могу проверить это прямо сейчас, чтобы увидеть, если afterпсевдоэлемент можно комбинировать с псевдоклассом hover.Если нет, то я рекомендую использовать ту же идею, создав <div> внутри тега <a>, чтобы стать эффектом столбца.

РЕДАКТИРОВАТЬ (на основе предложенного вами кода)

HTML

<body>
<div id="wrapper">
<div id="menu_wrapper">
<div id="menu">

<ul   
<li><a href>1399</a></li>   
<li><a href>1499</a></li>   
<li><a href>1599</a></li>   
<li><a href>1699</a></li>   
<li><a href>1799</a></li>    
<li><a href>1899</a></li>   
<li><a href>1999</a></li>  
<li><a href>2999</a></li>   
</ul>

</div>
</div>

<div id="content">
<p>Ullamco laboris nisi ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  excepteur sint occaecat eu fugiat nulla pariatur. Quis nostrud exercitation
  duis aute irure dolor lorem ipsum dolor sit amet.</p>
<p>Sed do eiusmod tempor incididunt in reprehenderit in voluptate ut enim ad
  minim veniam. Ullamco laboris nisi eu fugiat nulla pariatur. Excepteur sint
  occaecat quis nostrud exercitation mollit anim id est laborum. Lorem ipsum
  dolor sit amet.</p>
<p>Duis aute irure dolor eu fugiat nulla pariatur. Consectetur adipisicing elit,
  sunt in culpa in reprehenderit in voluptate. Ullamco laboris nisi sed do eiusmod
  tempor incididunt qui officia deserunt. Duis aute irure dolor cupidatat non
  proident, velit esse cillum dolore. Ut enim ad minim veniam, lorem ipsum dolor
  sit amet, excepteur sint occaecat.</p>

<img src="../images/myimage.png" alt="" />
</div>

</div>
</body>

CSS 

html, body {height: 100%; background-color: #F0F095; }
#menu_wrapper {width:900px; margin: 0 auto; height:150px;
background-color:#CC3300;border: 4px solid #000;}
#menu{margin:15px;border: 4px solid #000; height:25px;}
#menu ul{}
#menu ul, #menu li {list-style-type:none; margin:0; padding:0; text-indent:0;}
#menu ul li{ width:70px; float:left; }
#menu ul li:hover:after {content: ''; position:absolute;min-height:100%;width:70px; background-color:yellow; z-index:0; margin-left: -70px; opacity: .5}

a{width:100%; line-height: 25px; position: relative; z-index: 1;
text-align:center; float: left;
}
#wrapper {min-height:100%; background-color:#F1CA49; width: 1000px; margin: 25px auto;}
0 голосов
/ 09 ноября 2011

ки. извините, попробую еще раз, вот HTML 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<link rel="stylesheet"   type="text/css" href="try1.css" />
</head>

<body>
<div id="wrapper">
<div id="menu_wrapper">
<div id="menu">

<ul>

<li><a href="#">1399</a><ul><li></li> </ul></li>

<li><a href="#">1499</a><ul><li> </li> </ul></li>

<li><a href="#">1599</a><ul><li> </li> </ul></li>

<li><a href="#">1699</a><ul><li> </li> </ul></li>

<li><a href="#">1799</a><ul><li> </li> </ul></li>

<li><a href="#">1899</a><ul><li> </li> </ul></li>

<li><a href="#">1999</a><ul><li> </li> </ul></li>

<li><a href="#">2999</a><ul><li> </li> </ul></li>

<li><a href="#">3999</a><ul><li></li> </ul></li>

<li><a href="#">4999</a><ul><li> </li> </ul></li>

<li><a href="#">5999</a><ul><li> </li> </ul></li>

<li><a href="#">6999</a><ul><li> </li> </ul></li>

</ul>

</div>
</br>

<div id="menu">

<ul>

<li><a href="#">7999</a><ul><li> </li> </ul></li>

<li><a href="#">8999</a><ul><li> </li> </ul></li>

<li><a href="#">9999</a><ul><li> </li> </ul></li>

<li><a href="#">0999</a><ul><li> </li> </ul></li>

</ul>

</div>
</div>

<div id="content">
<p>Ullamco laboris nisi ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  excepteur sint occaecat eu fugiat nulla pariatur. Quis nostrud exercitation
  duis aute irure dolor lorem ipsum dolor sit amet.</p>
<p>Sed do eiusmod tempor incididunt in reprehenderit in voluptate ut enim ad
  minim veniam. Ullamco laboris nisi eu fugiat nulla pariatur. Excepteur sint
  occaecat quis nostrud exercitation mollit anim id est laborum. Lorem ipsum
  dolor sit amet.</p>
<p>Duis aute irure dolor eu fugiat nulla pariatur. Consectetur adipisicing elit,
  sunt in culpa in reprehenderit in voluptate. Ullamco laboris nisi sed do eiusmod
  tempor incididunt qui officia deserunt. Duis aute irure dolor cupidatat non
  proident, velit esse cillum dolore. Ut enim ad minim veniam, lorem ipsum dolor
  sit amet, excepteur sint occaecat.</p>

<img src="../images/myimage.png" alt="" />
</div>

</div>
</body>
</html>
0 голосов
/ 08 ноября 2011

Еще раз спасибо, Скотт. В случае, если это помогает кому-либо еще, я добавляю этот код CSS. Получено от Dsonesuk на форуме http://w3schools, и, похоже, оно прекрасно работает и почти на 100% близко к тому, чего я пытался достичь. 

html, body {height:100%; background-color: #F0F095; }
#menu_wrapper {width:900px; margin: 0 auto; height:150px; 
background-color:#CC3300;border: 4px solid #000;}
#menu{margin:15px;border: 4px solid #000; height:25px;}
#menu ul{width:960px; position:absolute; height:100%;}
#menu ul, #menu li {list-style-type:none; margin:0; padding:0; text-indent:0;}
#menu ul li{ width:70px; float:left;minheight:100%;position:relative; }
#menu ul ul {position:absolute;min-height:100%;width:70px; left: -32em; 
background  color:#FFFF00; z-index:0;}
#menu ul li:hover ul {left:0; top:25px;}
#menu ul li:hover{background-color:yellow;}
#content {position:relative; z-index:999;}
a{width:100%; line-height: 25px; /*vertical align text SHOULD MATCH HEIGHT VALUE*/
float:left; /* use to stace side by side OR comment out to stack above eace other*/
text-align:center; /*use for fixed width */
}
#wrapper {min-height:100%; background-color:#F1CA49; width: 1000px; margin: 25px auto;}
...