Disable mouseover in Safari

Discussion in 'Mac Apps and Mac App Store' started by GGJstudios, Oct 10, 2009.

  1. GGJstudios macrumors Westmere

    GGJstudios

    Joined:
    May 16, 2008
    #1
    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.:
    Picture 2.jpg
    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"
    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?
     
  2. plinden macrumors 68040

    plinden

    Joined:
    Apr 8, 2004
    #2
    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: ).
     
  3. GGJstudios thread starter macrumors Westmere

    GGJstudios

    Joined:
    May 16, 2008
    #3
    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?
     
  4. plinden macrumors 68040

    plinden

    Joined:
    Apr 8, 2004
    #4
    Create a new css file (call it eg. hide.css). Put the following line in it:

    Code:
    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.
     
  5. GGJstudios thread starter macrumors Westmere

    GGJstudios

    Joined:
    May 16, 2008
    #5
    I tried this and it didn't work.

    I created this file:
    Picture 2.jpg
    With this as the only line in the file:
    Picture 3.jpg
    Then I put this in Safari > Preferences > Advanced:
    Picture 4.jpg
    Then I restarted Safari and went to this page:
    And the mouseover still shows up:
    Picture 5.jpg
    The source of the page shows this:
    Code:
    <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?
     
  6. plinden macrumors 68040

    plinden

    Joined:
    Apr 8, 2004
    #6
    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:
    Code:
    <html>
        <body>
            <div class="socialTools">
                socialTools
            </div>
        </body>
    </html>
    
     

    Attached Files:

  7. GGJstudios thread starter macrumors Westmere

    GGJstudios

    Joined:
    May 16, 2008
    #7
    So should I modify the single-line .css file that I have?
     
  8. plinden macrumors 68040

    plinden

    Joined:
    Apr 8, 2004
    #8
    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?
     
  9. GGJstudios thread starter macrumors Westmere

    GGJstudios

    Joined:
    May 16, 2008
    #9
    I'm not sure what you mean by this. What exactly would I type in the location field?
    Yes, as I illustrated with the screen capture.
    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?
     
  10. plinden macrumors 68040

    plinden

    Joined:
    Apr 8, 2004
    #10
    file:///Users/GGJstudios/hide.css - or whatever the file location is.

    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)

    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:
    Code:
    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
     
  11. GGJstudios thread starter macrumors Westmere

    GGJstudios

    Joined:
    May 16, 2008
    #11
    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!
     

Share This Page