<分区>
<分区>
所以我需要允许我的两个图标在鼠标悬停时在某些文本中淡入淡出。我已经让它工作了，但是最左边的那个在图标悬停时无法选择跨度。我需要将文本放在 yelp 图标的左侧以进行设计决策。下面提供了代码，但我也有一个代码笔:https://codepen.io/ChumperDumper/pen/MWgoEpL
我已经尝试嵌套需要用图标淡入的文本，但是 font awesome 在这样做时会出现一些奇怪的故障。
.fa-yelp {
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
color: red;
margin: 1rem 2.5rem 1rem 0;
}
.fa-yelp:hover {
transform: rotate(-20deg);
}
.fa-yelp:hover~.text-bubble-yelp {
opacity: 1;
transition: opacity 0.5s ease-in;
}
.fa-twitter {
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
color: #1DA1F2;
margin: 1rem 0 1rem 2.5rem;
}
.fa-twitter:hover {
transform: rotate(20deg);
}
.fa-twitter:hover~.text-bubble-twitter {
opacity: 1;
transition: opacity 0.5s ease-in;
}
.text-bubble {
opacity: 0;
transition: opacity 0.5s ease-out;
position: static;
vertical-align: 25px;
font-weight: bold;
font-size: 1.5rem;
margin: 0 2rem
}<meta charset="utf-8">
<title>Website</title>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Welcom Section -->
<section id="welcome">
<span class="text-bubble text-bubble-yelp">Review us on Yelp!</span>
<span class="logo fab fa-yelp fa-3x"></span>
<span class="logo fab fa-twitter fa-3x"></span>
<span class="text-bubble text-bubble-twitter">Follow us on Twitter!</span>
</section>我原以为它会选择兄弟元素，但发现它不会选择在它自己之前出现的兄弟元素。 :/
最佳答案
我相信这对您有用。请检查 - https://codepen.io/Ghostkashak/pen/BaBZwvP
.fa-yelp {
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
color: red;
margin: 1rem 2.5rem 1rem 0;
}
.fa-yelp:hover {
transform: rotate(-20deg);
}
.fa-yelp:hover~.text-bubble-yelp {
opacity: 1;
transition: opacity 0.5s ease-in;
}
.fa-twitter {
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
color: #1DA1F2;
margin: 1rem 0 1rem 2.5rem;
}
.fa-twitter:hover {
transform: rotate(20deg);
}
.fa-twitter:hover~.text-bubble-twitter {
opacity: 1;
transition: opacity 0.5s ease-in;
}
.text-bubble {
opacity: 0;
transition: opacity 0.5s ease-out;
position: static;
vertical-align: 25px;
font-weight: bold;
font-size: 1.5rem;
margin: 0 2rem
}
.text-bubble-yelp {
float: left;
position: relative;
top: 25px;
}<head>
<meta charset="utf-8">
<title>Website</title>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Welcom Section -->
<section id="welcome">
<span class="logo fab fa-yelp fa-3x"></span>
<span class="text-bubble text-bubble-yelp">Review us on Yelp!</span>
<span class="logo fab fa-twitter fa-3x"></span>
<span class="text-bubble text-bubble-twitter">Follow us on Twitter!</span>
</section>不是最好的解决方案，但可以解决您的问题。
关于html - 如何在 CSS 中选择 previous sibling 姐妹，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57706963/