請賜教..如何在一個詞條下切換3個 highlight 位置

喬治兄

! p6 B3 `' o9 r% Y0 O- `( n
! C5 E/ H% V- P7 a. c請賜教..如何在一個詞條下切換3個 highlight 位置
* N. p1 B6 T( y8 d5 `5 M0 ]' V& r請各位技術先進不吝賜教....Thanks a lot
7 }" p* `' \* I  M7 M  A一個粗略想法，是設計3個按鈕，每一個按鈕分別 highlight 不同位置，但似乎會和之前的highlight 的位置會有重疊，除非設計成3個詞條，但個人比較想要的是在一個詞條內可以實現，有請網友們指點迷津....謝謝啦！
) A* o$ e& H) ^- a8 L2 i% w
' i3 J) R2 N& _附圖解釋如下：
目前的 highlight 位置stomach為第一個圖的中間中間較深黃色的那個鐘形曲線的區域，很顯然的并無全部覆蓋其它可能的區域，若要一次包函3個鐘形曲線的區域，怕又過大，顯然如此的 highlight 並不是很好，故想再増加其兩個鐘形曲線所函蓋的區域來處理有些平均值差異較大的分部做為 highlight 的調整位置
, o& A0 ^, t& P: G8 c, _  x8 Q! x6 Y
3 O5 z; N3 c- W9 l. k# P做為調整其定位上差異較大的頁面或各別的單字的 highlight 位置，目前所放的 highlight 的位置為中間較深黃色的鐘形區域的範圍，若碰上各別的標準異差較大，或平均值差異較大時，往往沒匡到，想弄増加其左右的鐘形曲線的區域來 highlight 另外兩個位置點，但希望是在同一個詞頭下完成的，若是每個詞頭要在増加2個詞頭似乎有點累贅，不知 css or html or js 可有簡單一點的處理方法，其主要的目地也就想尋求一個簡易的 css html js 切換 highlight 的模式

! _* b/ r$ _3 ]! B9 S, \目前想到的方法:

9 ~! a1 a+ ~" C: w. ], [! bhttps://www.w3schools.com/cssref ... =trycss3_transition

/ \4 F$ H( P6 i! H/ i1 X1. 目前找到了一個是 transition 的應用，但這樣最多也只能是兩個位置，還缺一個不知如何解決

2. 用 js 去切換 css 的 class 的方法.....不會 js .....可否提供一個實例照抄既可用的…謝謝啦！
- k* q. ~% V& s2 j
' _1 _( W6 d3 z    div class="HW_L"  div class="HW_M" div class="HW_R"
/ V; G. `+ T5 k! R. l& A
    HW_L,  HW_M,  HW_R ....類似三個 class 的切換
7 Q2 e/ j/ l  }) E: M
- [: H' ?% e; @! C+ d! ?3 E4 S; l1 L    也就是設計 3 個按鈕，每一個按鈕都必需 activate 其中一個的 class , off 其余的兩個 class ，這樣的概念

iandros

给乔治兄顶起来。很高深的样子，小白只能仰望，坐等大神……

喬治兄

0 }/ i& N" L' H! u

iandros 发表于 2021-11-22 08:50
给乔治兄顶起来。很高深的样子，小白只能仰望，坐等大神……

4 V8 g; Z* y6 K6 @
6 j( p6 F  N  X2 viandros 兄，在下並非大神，用的也並無什高深的學問，只是套用一些統計的概念，也趁著應用實做搞通一些概念，畢竟有實體的應對下會更有感覺和體會，事實上也只是純猜猜位置如此而已，畢竟大略的位置應該是可猜的出來 , 只是有的概率上的差異很大，統計估出的位置僅是大數法則，相對於精確定位容易許多，精確定位相當繁鎖也相對困難許多，在下真搞不出來

oversky

1 I( ]$ R: T* x$ {3 B
: P4 N9 [$ ~# ^( r% X$ _可以用元素之间重叠代替吗？
- i* H$ _. ^+ z9 T类似这样的效果？
https://www.w3schools.com/cssref ... e=trycss_js_z-index

leonlai2000

给乔治兄顶起来。很高深的样子，小白只能仰望，坐等大神……

喬治兄

oversky 发表于 2021-11-23 17:05
可以用元素之间重叠代替吗？
类似这样的效果？
  |' ]0 {( A/ Z/ G6 h) P$ i( rhttps://www.w3schools.com/cssref/tryit.asp?filename=tryc ...

! w) i* ]2 k3 ~Thanks to brother oversky for your good idea

( q" I5 u, d# g4 n$ C" q+ c

喬治兄

" v9 ?( C- S3 [

leonlai2000 发表于 2021-11-24 12:27
给乔治兄顶起来。很高深的样子，小白只能仰望，坐等大神……

謝謝水牛兄的繆讚，在下真胡搞瞎搞的，最近暮鼓晨鐘擠擠越南二輪公車，被公車重重碾壓了幾次，身體差了很多，待補補一陣子再來搞搞，謝謝啦！