1

I'm trying to get all headers on the left side of the "Current Navigation" and basically disable all of them and turn them into text. I have a jQuery script which already does this, however when I hover my mouse over them, the cursor changes into the "pointer" icon which is what it looks like when hovering over links. My requirement is to change the actual cursor to "default" however the hard part is finding exactly what attribute to call. Does anyone know how to do this?? I have searched everywhere and could not find out the answer! So far my code I put on a page to change navigation is:

<style>

.s4-ql ul.root > li > .menu-item:hover,.s4-qlheader:hover,.s4-qlheader:visited {
    cursor: default;
    text-decoration: none;
}

</style>

<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript">   </script>
<script type="text/javascript">


 $(".s4-ql ul.root > li > .menu-item").each(function(index) {

 $(this).removeAttr('href'); 


 </script>

I have found a small hunch towards the right direction, this little sucker is causing the issue:

.menu A.menu-item SPAN.menu-item-text

When I put this in the code to update the cursor, it changes all cursors. I am having a hard time trying to specifically target the cursor changing ONLY when hovering over the Headers.

Any ideas or tips would be greatly appreciated!

0

Try this

$('.s4-ql ul:first-child').find('> li').find('> a').each(function(){
    $(this).removeClass('selected');
    $(this).removeAttr('href');
    $(this).css({'cursor':'default !important','text-decoration':'none'});
    var text = $(this).find('>span').text();
    $(this).find('span').remove();
    $(this).text(text);
});
  • Thank you very much!! This solved the issue although I do have a small other problem now. If I hover over the header it works very well and the cursor is not changed. If I hover over a link below the header it will change, which is expected so that is good. However at this point, if I go back up to hover over the header, the cursor is not being updated and stays the same. I noticed this seems to be in "groups" (meaning that specific header and any links under) Any ideas on how to fix the small hover issue?? – Kam Nov 10 '14 at 18:33
  • @Kam I am not able to reproduce this issue. What you can do it using browser developer tool, find which Id is causing the problem and add it to the code. – Amal Hashim Nov 10 '14 at 18:40
  • I am using IE 9.0 however this solution works perfectly on both Chrome and Firefox. It looks like the issue was only a small difference, removing the "!important" solved the issue... which is quite strange to me. It must be interfering with something from SharePoint. The updated line is: $(this).css({'cursor':'default','text-decoration':'none'}); Just wanted to say thank you again very much!! You saved me on this project! – Kam Nov 10 '14 at 19:19
  • @Kam cool. Can you please mark as answer and close this thread – Amal Hashim Nov 10 '14 at 19:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.