我正在尝试获得一个圆形菜单(包括悬停 + 链接功能)以完全负责。
- 悬停和链接部分基本上工作正常。
- 没有悬停部分,圆形菜单表现响应。
- 但是由于包含悬停部分,因此在调整显示/屏幕宽度时菜单会被挤压。
我试过@media
的方法,在.ch-grid li
中为不同的屏幕宽度设置不同的宽度和高度,但这不被认为是一个真正的解决方案,只是一个临时的解决方法。
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
#test1 {
display: -webkit-flex;
display: flex;
text-align: center;
justify-content: space-between;
margin-bottom: 30px;
margin-left: 35px;
margin-right: 35px;
}
#test2 {
width: 15%;
text-align: center;
position: relative;
border-radius: 50%;
overflow: hidden;
background-color: #ff0082;
}
ul li img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: cover;
}
.ch-grid:after,
.ch-item:before {
content: '';
display: table;
}
.ch-grid:after {
clear: both;
}
.ch-grid li {
width: 220px;
height: 90px;
display: inline-block;
}
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
position: relative;
cursor: default;
box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease-in-out;
}
.ch-info {
position: absolute;
background: rgba(63, 147, 147, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
}
.ch-info p {
color: #fff;
padding: 13px 0px;
font-style: normal;
font-size: 9px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
opacity: 0;
transition: all 1s ease-in-out 0.4s;
}
.ch-info p a {
display: block;
color: rgba(255, 255, 255, 0.7);
font-style: normal;
font-weight: 700;
font-size: 140%;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: rgba(255, 242, 34, 0.8);
}
.ch-item:hover {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ch-item:hover .ch-info {
transform: scale(1);
opacity: 1;
}
.ch-item:hover .ch-info p {
opacity: 1;
}
<ul id="test1" class="ch-grid">
<li id="test2">
<div class="ch-item">
<img src="https://gespreksmakers.nl/images/1_hansie_hansumus.jpg" />
<div class="ch-info">
<p><a href="https://nkbv.nl">Hansie<BR>Hansumus</a></p>
</div>
</div>
</li>
<li id="test2">
<div class="ch-item">
<img src="https://gespreksmakers.nl/images/1_missie_marble.jpg" />
<div class="ch-info">
<p><a href="https://kakivi.de">Missie<BR>Marble</a></p>
</div>
</div>
</li>
<li id="test2">
<div class="ch-item">
<img src="https://gespreksmakers.nl/images/1_piotr_linski.jpg" />
<div class="ch-info">
<p><a href="https://telegraaf.nl">Piotr<BR>Linski</a></p>
</div>
</div>
</li>
<li id="test2">
<div class="ch-item">
<img src="https://gespreksmakers.nl/images/1_red.jpg" />
<div class="ch-info">
<p><a href="https://www.tukhut.nl">Mister<BR>Red</a></p>
</div>
</div>
</li>
<li id="test2">
<div class="ch-item">
<img src="https://gespreksmakers.nl/images/1_green.jpg" />
<div class="ch-info">
<p><a href="https://www.alumnei.nl">Miss<BR>Green</a></p>
</div>
</div>
</li>
<li id="test2">
<div class="ch-item">
<img src="https://gespreksmakers.nl/images/1_blue.jpg" />
<div class="ch-info">
<p><a href="https://www.astronieuws.nl">Mister<BR>Blue</a></p>
</div>
</div>
</li>
</ul>
可在此处找到显示当前 CSS 和 HTML 代码的 fiddle :https://jsfiddle.net/piotrlinski/b3tL9v4h/8/
有什么解决的建议吗?
最佳答案
The class attribute can be used with multiple HTML elements/tags and all will take the effect. Where as the id is meant for a single element/tag and is considered unique. Moreoever the id has a higher specificity value than the class.
响应式图片:
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
无序列表:
<ul class="thumbnails">
<li>Thumbnail 1</li>
<li>Thumbnail 2</li>
<li>...</li>
</ul>
使用 display: flex
在一行中列出无样式的列表:
.thumbnails {
display: flex;
list-style: none;
...
}
缩略图的结构
<a href="https://nkbv.nl" class="thumbnail">
<img src = "https://gespreksmakers.nl/images/1_hansie_hansumus.jpg"/>
<div class="overlay">
<p class="text">Mister White</p>
</div>
</a>
其中 .thumbnail
有 position: relative
而 .overlay
有 position: absolute
所以 .overlay
与 .thumbnail
位于相同区域。
使用 vw
使字体大小响应。
修改后的清晰解决方案
.thumbnails {
display: flex;
list-style: none;
padding: 0 2vw;
}
.thumbnails>li {
flex: 1 0;
margin: 0 5px;
text-align: center;
line-height: 0;
}
.thumbnail,
.thumbnail>img,
.thumbnail>.overlay {
border-radius: 50%;
}
.thumbnail {
position: relative;
display: inline-block;
cursor: pointer;
}
/* Responsive images */
.thumbnail>img {
display: block;
max-width: 100%;
height: auto;
}
.thumbnail>.overlay {
background: rgba(63, 147, 147, 0.8);
opacity: 0.7;
position: absolute;
top: 0;
height: 100%;
width: 100%;
transform: scale(0);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
transition: all 0.4s ease-in-out;
}
.thumbnail>.overlay>.text {
color: white;
width: 66.66%;
line-height: 100%;
margin: 0 auto;
padding: 5px 0;
border-bottom: 1px solid;
border-top: 1px solid;
font-size: 1.85vw;
transition: opacity 1s ease-in-out 0.4s;
opacity: 0;
}
.thumbnail:hover>.overlay {
transform: scale(1);
}
.thumbnail:hover>.overlay>.text {
opacity: 1;
}
<ul class="thumbnails">
<li>
<a href="https://nkbv.nl" class="thumbnail">
<img src="https://gespreksmakers.nl/images/1_hansie_hansumus.jpg" />
<div class="overlay">
<p class="text">Mister White</p>
</div>
</a>
</li>
<li>
<a href="https://kakivi.de" class="thumbnail">
<img src="https://gespreksmakers.nl/images/1_missie_marble.jpg" />
<div class="overlay">
<p class="text">Mister White</p>
</div>
</a>
</li>
<li>
<a href="https://telegraaf.nl" class="thumbnail">
<img src="https://gespreksmakers.nl/images/1_piotr_linski.jpg" />
<div class="overlay">
<p class="text">Mister White</p>
</div>
</a>
</li>
<li>
<a href="https://www.tukhut.nl" class="thumbnail">
<img src="https://gespreksmakers.nl/images/1_red.jpg" />
<div class="overlay">
<p class="text">Mister White</p>
</div>
</a>
</li>
<li>
<a href="https://www.alumnei.nl" class="thumbnail">
<img src="https://gespreksmakers.nl/images/1_green.jpg" />
<div class="overlay">
<p class="text">Mister White</p>
</div>
</a>
</li>
<li>
<a href="https://www.astronieuws.nl" class="thumbnail">
<img src="https://gespreksmakers.nl/images/1_blue.jpg" />
<div class="overlay">
<p class="text">Mister White</p>
</div>
</a>
</li>
</ul>
关于html - 如何获得完全响应的圆形菜单(包括悬停+链接功能)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58154236/