英文:
<mark> text across <li> elements with hover behavior in React
问题
如果我有这样的HTML/JSX：
<ul>
<li>第一个项目</li>
<li>第二个项目</li>
</ul>
而我想要突出显示一个"跨越"多个列表元素的范围，如下所示：
<ul>
<li>第一个项目</li>
<li>第二个项目</li>
</ul>
最后，我想要添加一些行为，使得在第一个<mark>标签上悬停会触发第二个<mark>标签上的效果，反之亦然。从用户的角度来看，它应该看起来和感觉起来像一个单独的<mark>标签。
这是否可以仅使用CSS/Tailwind来实现？根据我目前所见，兄弟元素~选择器只能用于影响后面的元素。在Tailwind中的peer类似乎也是如此。
如果需要JavaScript，是否可以指导我正确的方向？值得一提的是，这是一个React项目，因此可能存在一些直接操作DOM的注意事项。
英文:
Suppose I have HTML / JSX like this:
<ul>
<li>First bullet point</li>
<li>Second bullet point</li>
</ul>
and I want to highlight a range that "spans" multiple list elements "contiguously":
<ul>
<li>First bullet <mark>point</mark></li>
<li><mark>Second bullet</mark> point</li>
</ul>
Lastly, I'd like to add behaviour such that hovering over the first <mark> tags will trigger something for the second <mark> tags and vice versa. From the user's perspective, it should look and feel like a single <mark> tag.
Can this be done exclusively with CSS / Tailwind? Based on what I've seen so far, the sibling ~ combinator can only be used on earlier elements to affect later elements. The same appears to be true for the peer class in Tailwind.
If Javascript is required, can someone point me in the right direction? FWIW, this is for a React project so there may be some caveats to manipulating the DOM directly.
答案1
得分: 1
- 如果悬停在任何标记上也会“悬停”在每个其他标记上，那么这是一个简单的 has() 调用。
ul:has(mark:hover) mark {
background-color: red;
}
- 如果只有悬停在一个标记上会“悬停”在相邻的标记上，那么这就会复杂一些。
li mark:hover,
li:has(mark:last-child:hover) + li > mark:first-child,
li:has(mark:last-child):has(+ li > mark:first-child:hover) mark {
background-color: red;
}
- 由于
:has()在 Firefox 中默认未启用（截至版本109），这里有一个使用 JavaScript 的解决方法。
const ul = document.querySelector("ul");
const removeActive = function (evt) {
const active = evt.currentTarget.querySelector("mark.active");
if (active) active.classList.remove("active");
}
ul.addEventListener("mouseover", function (evt) {
removeActive(evt);
let elem = null;
const mark = evt.target.closest("mark");
if (!mark) return;
const li = mark.closest("li");
if (!mark.previousSibling) {
const prevLi = li.previousElementSibling;
elem = prevLi && prevLi.lastChild;
} else if (!mark.nextSibling) {
const nextLi = li.nextElementSibling;
elem = nextLi && nextLi.firstChild;
}
if (elem && elem.nodeName == "MARK") {
elem.classList.add("active");
}
});
ul.addEventListener("mouseleave", removeActive);
li mark:hover,
li mark.active {
background-color: red;
}
以上是你要翻译的内容。
英文:
- If hovering over any mark will also "hover" every other mark, then it is a simple has() call.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
ul:has(mark:hover) mark {
background-color: red;
}
<!-- language: lang-html -->
<ul>
<li><span>First bullet </span><mark>point</mark></li>
<li><mark>Second bullet</mark><span> point</span></li>
<li><span>Third bullet </span><mark>point</mark></li>
<li><mark>Fourth bullet</mark><span> point</span></li>
<li><span>The </span><mark>Fifth bullet</mark><span> point</span></li>
</ul>
<!-- end snippet -->
- If hovering over a mark only "hovers" marks that are contiguous, then it is a bit more complicated.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
li mark:hover,
li:has(mark:last-child:hover) + li > mark:first-child,
li:has(mark:last-child):has(+ li > mark:first-child:hover) mark {
background-color: red;
}
<!-- language: lang-html -->
<ul>
<li><span>First bullet </span><mark>point</mark></li>
<li><mark>Second bullet</mark><span> point</span></li>
<li><span>Third bullet </span><mark>point</mark></li>
<li><mark>Fourth bullet</mark><span> point</span></li>
<li><span>The </span><mark>Fifth bullet</mark><span> point</span></li>
</ul>
<!-- end snippet -->
- Since
:has()is not enabled by default on Firefox (as of v109), here's a workaround using JavaScript.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const ul = document.querySelector("ul");
const removeActive = function (evt) {
const active = evt.currentTarget.querySelector("mark.active");
if (active) active.classList.remove("active");
}
ul.addEventListener("mouseover", function (evt) {
removeActive(evt);
let elem = null;
const mark = evt.target.closest("mark");
if (!mark) return;
const li = mark.closest("li");
if (!mark.previousSibling) {
const prevLi = li.previousElementSibling;
elem = prevLi && prevLi.lastChild;
} else if (!mark.nextSibling) {
const nextLi = li.nextElementSibling;
elem = nextLi && nextLi.firstChild;
}
if (elem && elem.nodeName == "MARK") {
elem.classList.add("active");
}
});
ul.addEventListener("mouseleave", removeActive);
<!-- language: lang-css -->
li mark:hover,
li mark.active {
background-color: red;
}
<!-- language: lang-html -->
<ul>
<li>First bullet <mark>point</mark></li>
<li><mark>Second bullet</mark> point</li>
<li>Third bullet <mark>point</mark></li>
<li><mark>Fourth bullet</mark> point</li>
<li>The </span><mark>Fifth bullet</mark><span> point</li>
</ul>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论