Question

我正在尝试做一些看起来我添加的片段，但是使用svg圈子，是否有可能将我的svg圈子放入列表中？我希望当我将鼠标悬停在我的圈子中时，该框会出现

ul#list_of_thrones {
  list-style-type:none;
}
ul#list_of_thrones li{
  position: relative;
  font-size:20px;
  font-family: helvetica, arial, sans-serif;
}
ul#list_of_thrones li > span{
  position: relative;
  display:none;
}
ul#list_of_thrones li:hover > span{
  position: absolute;
  top:0;
  left:100px;
  display:block;
  background:red;
  color:white;
  padding:6px;
}

ul#list_of_thrones li:hover > span:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-right-color: red;
	border-width: 6px;
	margin-top: -6px;
}

<ul id="list_of_thrones">
  <li>Tyrion<span>Lannister</span></li>
  <li>Loras<span>Tyrell</span></li>
  <li>Gregor<span>Clegane</span></li>
  <li>Brandon<span>Stark</span></li>
  <li>Daenerys<span>Targaryen</span></li>
  <li>Oberyn<span>Martell</span></li>
</ul>

Answer 1

只需用SVG圈替换文本，您就应该使用现有的CSS获得相同的功能：

<li><svg><circle cx="10" cy="10" r="10"/></svg><span>Tyrell</span></li>

<强>段：

ul#list_of_thrones {
  list-style-type:none;
}
ul#list_of_thrones li{
  position: relative;
  font-size:20px;
  font-family: helvetica, arial, sans-serif;
}
ul#list_of_thrones li > span{
  position: relative;
  display:none;
}
ul#list_of_thrones li:hover > span{
  position: absolute;
  top:0;
  left:100px;
  display:block;
  background:red;
  color:white;
  padding:6px;
}

svg {
  height: 1.5em;
}

ul#list_of_thrones li:hover > span:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-right-color: red;
	border-width: 6px;
	margin-top: -6px;
}

<ul id="list_of_thrones">
  <li><svg><circle cx="10" cy="10" r="10"/></svg><span>Tyrell</span></li>
  <li><svg><circle cx="10" cy="10" r="10"/></svg><span>Clegane</span></li>
  <li><svg><circle cx="10" cy="10" r="10"/></svg><span>Stark</span></li>
  <li><svg><circle cx="10" cy="10" r="10"/></svg><span>Targaryen</span></li>
  <li><svg><circle cx="10" cy="10" r="10"/></svg><span>Martell</span></li>
</ul>

SVG元素列表

1 个答案: