Disable mouseover in Safari

[GGJstudios]

I've searched MacRumors and Google, but haven't found anything, so I'm wondering if I'm the only one annoyed by this mouseover that pops up when visiting many news sites, that allows you to share the article on Digg, Del.icio.us, Reddit, Stumbleupon, Yahoo! Buzz, Mixx!, Twitter, etc.:

​

I have SafariBlock, Safari AdBlock and ClickToFlash, but none of them block this mouseover. After looking at the "View Source" data, it appears to be a class called "socialTools"

<div class="socialTools">

but I haven't found a way to block a class on a website.

The problem is that the menu pops up when you move your mouse over the "Share" link, but then it doesn't always go away when you move your mouse away from it. I'd prefer it never pops up at all, but haven't found a method to accomplish this. Anyone have ideas?

 

[plinden]

You could create your own CSS style sheet to override the CSS for the share links and configure Safari to use it (Preferences -> Advanced -> Style Sheet: ).

 

[GGJstudios]

You could create your own CSS style sheet to override the CSS for the share links and configure Safari to use it (Preferences -> Advanced -> Style Sheet: ).

Thanks for the idea. Can you give specifics on how to do this? And would I have to create a CSS style sheet for each page I visit, or would it be like a template that simply blocks the appearance of the socialTools class when it appears on any site?

 

[plinden]

Create a new css file (call it eg. hide.css). Put the following line in it:

div[class*="socialTools"]{visibility: hidden ! important}

Select this in Safari using the Preferences as I mentioned above. This will hide all divs that have the class "socialTools" on every page you visit.

Edit: What websites in particular are you talking about? I looked up CNET and got something similar, but its share class was "linkedIcon share"

You can add as many lines as you want to hide as many items as you want.

 

[GGJstudios]

Create a new css file (call it eg. hide.css). Put the following line in it:

div[class*="socialTools"]{visibility: hidden ! important}

Select this in Safari using the Preferences as I mentioned above. This will hide all divs that have the class "socialTools" on every page you visit.

Edit: What websites in particular are you talking about? I looked up CNET and got something similar, but its share class was "linkedIcon share"

You can add as many lines as you want to hide as many items as you want.

I tried this and it didn't work.

I created this file:

​

With this as the only line in the file:

​

Then I put this in Safari > Preferences > Advanced:

​

Then I restarted Safari and went to this page:

http://www.cbsnews.com/stories/2009/10/11/world/main5376951.shtml
​

And the mouseover still shows up:

​

The source of the page shows this:

<div class="socialTools">
	<dl>
		<dt>Share:</dt>
		<dd><a class="linkIcon digg" href="http://digg.com/submit?phase=2&url=http%3A%2F%2Fwww.cbsnews.com%2Fstories%2F2009%2F10%2F11%2Fworld%2Fmain5376951.shtml&title=IRA+Splinter+Group+to+Renounce+Violence&bodytext=">Digg</a></dd>
		<dd><a class="linkIcon facebook" href="http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.cbsnews.com%2Fstories%2F2009%2F10%2F11%2Fworld%2Fmain5376951.shtml">Facebook</a></dd>
		<dd><a class="linkIcon ybuzz" href="http://buzz.yahoo.com/submit?submitUrl=http%3A%2F%2Fwww.cbsnews.com%2Fstories%2F2009%2F10%2F11%2Fworld%2Fmain5376951.shtml&submitHeadline=IRA+Splinter+Group+to+Renounce+Violence&submitSummary=">Yahoo! Buzz</a></dd>
		<dd><a class="linkIcon twitter" href="http://twitter.com/home?status=IRA+Splinter+Group+to+Renounce+Violence:+http%3A%2F%2Fwww.cbsnews.com%2Fstories%2F2009%2F10%2F11%2Fworld%2Fmain5376951.shtml" title="Twitter this page">Twitter</a></dd>
		<dd><a class="linkIcon mixx" href="http://www.mixx.com/submit?page_url=http%3A%2F%2Fwww.cbsnews.com%2Fstories%2F2009%2F10%2F11%2Fworld%2Fmain5376951.shtml" title="Add to Mixx">Mixx</a></dd>
	</dl>
</div>

So there is one <div class="socialTools"> with several <a class="linkIcon ..." lines. Yet, only 5 of the 11 links shown are represented by the linkIcon classes. Any ideas?

 

[plinden]

I tried this and it didn't work.

...

The source of the page shows this:

<div class="socialTools">
	<dl>
		<dt>Share:</dt>
		<dd><a class="linkIcon digg" href="http://digg.com/submit?phase=2&url=http%3A%2F%2Fwww.cbsnews.com%2Fstories%2F2009%2F10%2F11%2Fworld%2Fmain5376951.shtml&title=IRA+Splinter+Group+to+Renounce+Violence&bodytext=">Digg</a></dd>
		<dd><a class="linkIcon facebook" href="http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.cbsnews.com%2Fstories%2F2009%2F10%2F11%2Fworld%2Fmain5376951.shtml">Facebook</a></dd>
		<dd><a class="linkIcon ybuzz" href="http://buzz.yahoo.com/submit?submitUrl=http%3A%2F%2Fwww.cbsnews.com%2Fstories%2F2009%2F10%2F11%2Fworld%2Fmain5376951.shtml&submitHeadline=IRA+Splinter+Group+to+Renounce+Violence&submitSummary=">Yahoo! Buzz</a></dd>
		<dd><a class="linkIcon twitter" href="http://twitter.com/home?status=IRA+Splinter+Group+to+Renounce+Violence:+http%3A%2F%2Fwww.cbsnews.com%2Fstories%2F2009%2F10%2F11%2Fworld%2Fmain5376951.shtml" title="Twitter this page">Twitter</a></dd>
		<dd><a class="linkIcon mixx" href="http://www.mixx.com/submit?page_url=http%3A%2F%2Fwww.cbsnews.com%2Fstories%2F2009%2F10%2F11%2Fworld%2Fmain5376951.shtml" title="Add to Mixx">Mixx</a></dd>
	</dl>
</div>

So there is one <div class="socialTools"> with several <a class="linkIcon ..." lines. Yet, only 5 of the 11 links shown are represented by the linkIcon classes. Any ideas?

Hmm, odd - it works for me. See attachment. You appear to have done all the steps, including restarting Safari.

I first tested it out with a standalone html file:

<html>
    <body>
        <div class="socialTools">
            socialTools
        </div>
    </body>
</html>

 

[GGJstudios]

Hmm, odd - it works for me. See attachment. You appear to have done all the steps, including restarting Safari.

I first tested it out with a standalone html file:

<html>
    <body>
        <div class="socialTools">
            socialTools
        </div>
    </body>
</html>

So should I modify the single-line .css file that I have?

 

[plinden]

Your css looks fine. Just double check everything. That's all I can think of.

Does your css file load properly if you type its file in Safari's location field?

Is it definitely selected in Preferences?

Did you definitely restart Safari?

 

[GGJstudios]

Your css looks fine. Just double check everything. That's all I can think of.

Does your css file load properly if you type its file in Safari's location field?

I'm not sure what you mean by this. What exactly would I type in the location field?

Is it definitely selected in Preferences?

Yes, as I illustrated with the screen capture.

Did you definitely restart Safari?

Yes, both quit and then restarted, then also reset Safari.

Does it matter where the hide.css file is located? Does it need to be in a specific location? Also, I created it by opening TextEdit, copying and pasting the line from your post, converting the format to plain text, and saved it as hide.txt. Then I changed the extension to .css. Is that the right procedure?

 

[plinden]

I'm not sure what you mean by this. What exactly would I type in the location field?

file:///Users/GGJstudios/hide.css - or whatever the file location is.

Yes, as I illustrated with the screen capture.

I know ... it's just my experience that I'll spend a couple of hours trying to work out what's wrong with something, then go back to basics and find that I didn't actually, e.g save settings (not applicable in this case)

Does it matter where the hide.css file is located? Does it need to be in a specific location? Also, I created it by opening TextEdit, copying and pasting the line from your post, converting the format to plain text, and saved it as hide.txt. Then I changed the extension to .css. Is that the right procedure?

Mine's in my home folder and it doesn't matter where the css file is.

Let me try what you did and see if it helps.

Edit: Hmm, saving it from TextEdit as a plain text file, I now get the Share link on that news page. Let me look into this. I originally used vi from Terminal.

Edit 2: Ok, my fault I think. When I couldn't find "sharedTools" on CNET, I added a line to my css for the "linkIcon share" class. So I had:

div[class*="socialTools"] {visibility: hidden ! important}
a[class*="linkIcon share"] {visibility: hidden ! important}

in my CSS. Turns out it's the second line that's hiding the Share link on that cbs news page, ie. using only the
'a[class*="linkIcon share"] {visibility: hidden ! important}' works

 

[GGJstudios]

...
in my CSS. Turns out it's the second line that's hiding the Share link on that cbs news page, ie. using only the
'a[class*="linkIcon share"] {visibility: hidden ! important}' works

I replaced the original line in the hide.css with:

a[class*="linkIcon share"] {visibility: hidden ! important}​

It worked! Excellent! Thank you for your time and help!