0
Так что я создаю тестовую веб-страницу, но имею проблемы с получением команды: hover для правильной работы. Независимо от того, что я пытался сделать из исследования, похоже, я работаю, поэтому мне нужна какая-то помощь.CSS: команда hover не работает
Я пытаюсь размыть изображение, а затем текст затухает, но я застрял при размывании изображения с использованием фильтров webkit. Поэтому я убрал его обратно и просто попытался изменить один цвет на другой, и даже это не сработало. В чем проблема?
HTML
#MenuHome {
top:-20px;
right:130px ;
font-size: 40px;
}
#Checkout {
left:190px
}
body {
height:1100px;
}
/*Content*/
#Content {
position:absolute;
top:100px;
width:1100px;
height: 2000px ;
left:50% ;
margin-left: -550px;
background-color: #ecf0f1;
border-radius:15px;
box-shadow:5px 10px 10px rgba(136, 116, 116, 0.31);
z-index: -1
}
#Content_Products {
position:absolute;
top:100px;
width:1100px;
height: 870px ;
left:50% ;
margin-left: -550px;
background-color: #ecf0f1;
border-radius:15px;
box-shadow:5px 10px 10px rgba(136, 116, 116, 0.31);
z-index: -1
}
#TopSection {
position: absolute;
top: 0px;
width: 100%;
Height: 250px;
background-image:url(AboutUsImage.jpg);
border-bottom-style: solid;
border-bottom-color: rgba(60, 231, 178, 0.64);
border-bottom-width: 5px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
#AboutUs1 {
font-family:'Ek Mukta';
\t color:white;
font-size: 48px;
z-index: 5;
text-align: center;
padding: 50px
}
#Info {
z-index:0;
position: absolute;
top:255px;
width: 1100px;
}
.TelescopesLink {
position:absolute;
display:inline-block;
left:585px;
top:30px;
height:250px;
width:500px;
}
.MountLink {
z-index: 1;
position:absolute;
left:15px;
top:30px;
height:250px;
width:500px;
background-color: green;
}
.MountLink:hover{
z-index: 1;
background-color: red;
}
.AstroLink {
position:absolute;
left:15px;
top:330px;
height:250px;
width:500px;
}
.AccessoriesLink {
position:absolute;
top:330px;
left:585px;
height:250px;
width:500px;
}
/*With the main culprit being */
.MountLink {
z-index: 1;
position:absolute;
left:15px;
top:30px;
height:250px;
width:500px;
background-color: green;
}
.MountLink:hover{
z-index: 1;
background-color: red;
}<div id="Content_Products">
<div id="TopSection">
<h1 id="AboutUs1">Products</h1>
</div>
<div id="Info">
<div class="TelescopesLink">
<img src="telescopes.jpg" >
</div>
<div class="MountLink">
</div>
<div class="AstroLink">
<img src="astro.jpg" >
</div>
<div class="AccessoriesLink">
<img src="accessories.jpg"</img>
</div>
</div>
</div>Я просто не могу заставить его работать, любая помощь или советы будут оценены
Ах, это исправлено, спасибо большое –
Причина, по которой он имеет отрицательный z-index, потому что он прокручивается под фиксированным заголовком в верхней части страницы, но помещает его индекс в 1, а заголовки - на 2 решает и этот вопрос. Еще раз спасибо –
без проблем, рад, что смогу помочь – atmd