gpt4 book ai didi

html - CSS 基础 :hover

转载 作者:太空宇宙 更新时间:2023-11-03 23:13:25 24 4
gpt4 key购买 nike

有人能指出为什么悬停不起作用吗?我设法将背景图像添加到每个 anchor 元素。但是,代码看起来多余,但如果我尝试将 background-size:cover、background-position: right top 和 background-origin: content-box 移动到 .menu-item 类,它就会停止工作。同样在 CSS 的底部,有一个 #ID:hover 似乎不起作用,我不知道为什么,欢迎任何提示 :)

#thumb-services {
width: 100%;
height: 250px;
}

.menu-item {
width: 24%;
height: 100%;
position: relative;
float: left;
margin: 0 0.66666667%;
cursor: pointer;
}

#thumb-services > a:last-child {
margin-right: 0;
float: right;
}

#thumb-services > a:first-child {
margin-left: 0;
}

#tratamento-imagem {
background: url('http://lorempixel.com/100/200/sports/1/') no-repeat;
background-size:cover;
background-position: right top;
background-origin: content-box;
}

#portfolio {
background: url('http://lorempixel.com/100/200/sports/2/') no-repeat;
background-size:cover;
background-position: right top;
background-origin: content-box;
}

#fotografia {
background: url('http://lorempixel.com/100/200/sports/3/') no-repeat;
background-size:cover;
background-position: right top;
background-origin: content-box;
}

#montagem {
background: url('http://lorempixel.com/100/200/sports/4/') no-repeat;
background-size:cover;
background-position: right top;
background-origin: content-box;
}

#tratamento-imagem:hover {
background: red;
}
<nav id="thumb-services">
<a id="tratamento-imagem" class="menu-item"></a>
<a id="portfolio" class="menu-item"></a>
<a id="fotografia" class="menu-item"></a>
<a id="montagem" class="menu-item"></a>
</nav>

最佳答案

你也可以使用伪元素实现悬停效果:http://jsfiddle.net/mu20eLd1/ . (注意:我已经重组了您的一些代码)。

HTML:

<nav id="thumb-services">
<a></a>
<a></a>
<a></a>
<a></a>
</nav>

CSS:

#thumb-services {
height: 250px;
}

#thumb-services > a {
width: 24%;
height: 100%;
float: left;
cursor: pointer;
position: relative;
background: url('http://lorempixel.com/100/200/sports/1/') no-repeat top left/cover;
}

#thumb-services > a + a {
margin-left: 1.32%;
}


#thumb-services > a:nth-of-type(2) {
background-image: url('http://lorempixel.com/100/200/sports/2/');
}

#thumb-services > a:nth-of-type(3) {
background-image: url('http://lorempixel.com/100/200/sports/3/');
}

#thumb-services > a:nth-of-type(4) {
background-image: url('http://lorempixel.com/100/200/sports/4/');
}

#thumb-services > a:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: hsla(0, 10%, 20%, 0.7);
display: none;
}

#thumb-services > a:hover:before {
display: block;
}

关于html - CSS 基础 :hover,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31711818/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com