這是帶有代碼的 JSFiddle。目標：單擊按鈕應僅.blur_filter_off將類應用于. 整個文本應保持原樣，即1行。當前問題： 1）單擊按鈕會停用屬性而不是應用類。2)單擊按鈕時文本分為2行。附加信息：一般情況下不確定，因為想法如下：最初通過類模糊，并在通過類單擊按鈕時變得不模糊。也許有一種方法可以在不實現(xiàn)財產的情況下做到這一點。span id="hint"display:none.blur_filter_offdisplay:nonespan id="hint"blur_filter_onblur_filter_offdisplay:nonefunction showHint(id1) { var x = document.getElementById(id1).style; x.display = (x.display != "block") ? "block" : "none";}.example { color: #1f2c60; font-size: calc(0.7em + 2.3vw);}.blur_filter_on { filter: blur(0.35em);}.blur_filter_off { animation-name: blur_decrease; animation-timing-function: ease; animation-duration: 1s;}@keyframes blur_decrease { from { filter: blur(0.35em); } to { filter: blur(0); }}<div> <span class="example"><span class="blur_filter_on"><span id="hint">This is</span> the sentence i use as an</span> example.</span></div><a class=hint href="#" onclick="showHint('hint')">BUTTON</a>
1 回答
慕妹3242003
TA貢獻1824條經驗 獲得超6個贊
這是可以實現(xiàn)您指定的目標的解決方案。我在這里使用普通的 javascript，你也可以使用 jQuery 來實現(xiàn)這一點。它還需要調整 HTML 和 CSS。
更新后的工作小提琴在這里
function showHint(id1) {
var x = document.getElementById(id1);
var blurOffClass = "blur_filter_off";
if (!x.classList.contains(blurOffClass)) {
x.classList.add(blurOffClass);
}
}
.example {
color: #1f2c60;
font-size: calc(0.7em + 2.3vw);
}
.blur_filter_on > * {
filter: blur(0.35em);
}
.blur_filter_off {
animation-name: blur_decrease;
animation-timing-function: ease;
animation-duration: 1s;
filter: blur(0);
}
@keyframes blur_decrease {
from { filter: blur(0.35em); }
to { filter: blur(0); }
}
<div>
<span class="example">
<span class="blur_filter_on">
<span id="hint">This is</span>
<span>the sentence i use as an</span>
</span>
example.
</span>
</div>
<a class=hint href="#" onclick="showHint('hint')">BUTTON</a>
- 1 回答
- 0 關注
- 127 瀏覽
添加回答
舉報
0/150
提交
取消