Change CSS on mouseover macros

Comments

• greyelf

  March 2017

  When trying to determine what CSS Selector to use to style a specific portion of a page I find the easiest method to so is to use your web-browsers built-in Development Tools to inspect the HTML of that portion.
  
  note: How to access the Development Tools can be different between web-browser brands and operating systems so I suggest you use google to find the instructions for yours. The following instructions are for Chrome on Windows 10.
  
  My example passage contains the following code:

  [Standand Mouseover Macro]<mouseover|
  
  (mouseover: ?mouseover)[]
  

  
  
  1. Press the F12 key to open the Development Tools window then make sure the Elements tab is selected in the tab bar of the left panel.
  
  2. Press CTRL+F to open search and enter the text contained within the target named hook, in my example that is Standand Mouseover Macro. The second instance of that text should be contained within a block of HTML that looks something like the following:

  <tw-enchantment class="enchantment-mouseover">
  	<tw-hook name="mouseover">Standand Mouseove Macro</tw-hook>
  </tw-enchantment>
  

  (note: CTRL+F means hold down the CTRL key then press the F key.)
  
  
  3. You will notice that the class of the tw-enchantment element is enchantment-mouseover, this is the class you need to target in your CSS.
  
  4. If you click on the <tw-enchantment class="enchantment-mouseover"> line within the Elements window then look at the right panel of the development tools you should see the related CSS Selector and the CSS currently being used to style it. (assuming that the Styles tab is selected in that panel)
  
  5. CSS like the following will alter the fore-ground colour of the relevant text.

  .enchantment-mouseover {
      color: green;
  }
  

  
  P.S This comment within the Harlowe -Changing color of text... thread explains the CSS Selectors of two other link types.
• piratescarfy

  March 2017

  Oh my god I knew it would be something simple like this!! I knew about how to inspect the page, but just not the bit that was a class. Thank you so much!!!!!