Remove hover effect on embedded twitter widget

Question

How do I remove the dark hover effect on the following embedded twitter widget?

<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 here: https://jsfiddle.net/mkc51zsc/

You won't be able to change the styles of any content rendered through an iframe unfortunately - not unless that content is served from your own server. — UncaughtTypeError, Oct 14 '17 at 18:37
Is it possible to maybe alter the content after it has been loaded onto the page? I.e. suppress the code with JavaScript code? — methuselah, Oct 14 '17 at 18:40
cant do with iframe. See https://stackoverflow.com/questions/6494721/css-override-body-style-for-content-in-iframe — Dane, Oct 14 '17 at 18:44
You'll probably get a CORS error in your console if you try to manipulate the DOM of an `iframe` @methuselah - unless I'm mistaken, I believe this is what happened the last time I tried that. You can give it a go, although I don't think it'll work. — UncaughtTypeError, Oct 14 '17 at 18:48

score 0 · Answer 1 · answered Oct 14 '17 at 19:48

Override the

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

with

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

Implementation

Option 1) Wrap your link inside an element with unique Id e.g.

HTML

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

CSS

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

Option 2) Ugly fix

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

Remove hover effect on embedded twitter widget

1 Answers1