删除嵌入式 Twitter 小部件上的悬停效果

Posted 2023-03-28

【中文标题】删除嵌入式 Twitter 小部件上的悬停效果

【英文标题】：Remove hover effect on embedded twitter widget

【发布时间】：2018-03-26 15:48:30

【问题描述】：

如何移除以下嵌入式 Twitter 小部件上的黑色悬停效果？

<a class="twitter-timeline" href="https://twitter.com/AV_Afrique" data-chrome="noheader nofooter transparent" data-theme="dark" data-tweet-limit="1" data-border-color="#272727">Tweets by AV_Afrique</a>
<script async src="//platform.twitter.com/widgets.js"
charset="utf-8"></script>

这里是 JsFiddle：https://jsfiddle.net/mkc51zsc/

【问题讨论】：

很遗憾，您将无法更改通过 iframe 呈现的任何内容的样式 - 除非该内容是从您自己的服务器提供的。

是否可以在内容加载到页面后更改内容？ IE。用 javascript 代码抑制代码？

不要在你的html标签中指定data-theme="dark"？

这消除了 dark 悬停效果。

不能使用 iframe。见***.com/questions/6494721/…

【参考方案1】：

覆盖

.timeline-Tweet:hover 
    background-color: rgba(24,50,35); 

与

.timeline-Tweet:hover 
    background-color:transparent; 

实施

选项 1) 将链接包装在具有唯一 ID 的元素中，例如

HTML

<div id="myId">
 <a>..twitter stuff </a>
</div>

CSS

 #myId .timeline-Tweet:hover 
        background-color:transparent; 
    

选项 2) 丑陋的修复

.timeline-Tweet:hover 
        background-color:transparent !important;