Hovering over icons that changes colour

img src svg change color
font awesome change icon on hover
change font awesome icon color on hover
font awesome icons
change svg color on hover
change color of linked svg
change color of icon css
change svg color css

So I am playing around with something with JavaScript. I am trying to get my div to change colour once the user has hovered over it, then once the user leaves it should return to the original colour . Here is my code. For some reason my browser (chrome) isn't displaying it even though everything seems right, but maybe someone can spot something that I cant

var bookEventsInfo = document.getElementById("bookEventsInfo");

bookEventsInfo.addEventListener("mousemove", function() {
  sources.syle.color = "green";
})
bookEventsInfo.addEventListener("mouseleave", function(){
   bookEventsInfo.syle.color = "grey";
})
<div id="bookEventsInfo">
  <i class="fas fa-book-open fa-5x"></i>
  <hr>
  <p>Book Events allows the user<br>to select and manage bookings<br>of certain events to choose from</p>


  <!-- <p>Book Events form will allow you to<br>Select specifc events from a list<br>and can make bookings</p> -->
</div>

You can use straight CSS for this. In your styles add something like the following:

.element:hover {
    background: red;
}

Change color when hover a font awesome icon?, if you want to change only the colour of the flag on hover use this: http://jsfiddle. net/uvamhedx/ .fa-flag:hover { color: red; } You’re largely limited to a single color with icon fonts in a way that SVG isn’t, but still, it is appealingly easy to change that single color with color. Using inline SVG allows you to set the fill, which cascades to all the elements within the SVG, or you can fill each element separately if needed. SVG Symbol / Use

There is a typo in syle should be style. The event should be mouseenter.

The mouseenter event is only triggered when the mouse pointer enters the div element. The onmousemove event triggers every time the mouse pointer is moved over the div element.

There is no source defined in your code. Also you can use this object to refer the current element:

var bookEventsInfo = document.getElementById("bookEventsInfo");

bookEventsInfo.addEventListener("mouseenter", function() {
  this.style.color = "green";
})
bookEventsInfo.addEventListener("mouseleave", function(){
   this.style.color = "#000";
})
<div id="bookEventsInfo">
  <i class="fas fa-book-open fa-5x"></i>
  <hr>
  <p>Book Events allows the user<br>to select and manage bookings<br>of certain events to choose from</p>


  <!-- <p>Book Events form will allow you to<br>Select specifc events from a list<br>and can make bookings</p> -->
</div>

Change Color of SVG on Hover, If you're used to working with icon fonts, one thing you might enjoy about them is how easy it is to change the color. You're largely limited to a� Icon Bar Menu Icon Accordion Tabs Vertical Tabs Tab Headers Full Page Tabs Hover Tabs Top Navigation Responsive Topnav Navbar with Icons Search Menu Search Bar Fixed Sidebar Side Navigation Responsive Sidebar Fullscreen Navigation Off-Canvas Menu Hover Sidenav Buttons Sidebar with Icons Horizontal Scroll Menu Vertical Menu Bottom Navigation

In addition to Mamuns answer here is a jQuery implementation of the above. Although CSS is the best way to achieve this as answered by others.

/* jQuery implementation */
$("#bookEventsInfo").on("mouseover", function() {
  this.style.color = "green";
});

$("#bookEventsInfo").on("mouseout", function() {
  this.style.color = "";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="bookEventsInfo">
  <i class="fas fa-book-open fa-5x"></i>
  <hr>
  <p>
    Book Events allows the user<br>to select and manage bookings<br>of certain events to choose from
  </p>
</div>

Change icon color on mouseover - Support, It will change the color of iconbox icons on hover. If you can elaborate on the changes you would like to make and post the link to your website,� If you’re anything like us, you probably had to hover over each and every photo on her site, so you can see each and every image come to life with color. She made the effect even more extreme by using a minimalistic approach to the color scheme and general design of her site, using lots of grey scale and keeping the layout uncluttered.

Change icons color on hover, Posted on Feb 20, 2016 by Arman Arutyunov I'm trying to change the color of my social icons but nothing happens. better answer than just to change the color in photoshop and somehow replace the basic icon by new one via hover in css. go to Settings, Ease of Access, Mouse. Choose pointer size and pointer color. That should fix the black-on-black issue. for the hidden icons issue, Right click taskbar, click properties, under Taskbar tab click Customize, at bottom left select Always show. box.

I can't change the color of the social icon via :hover, How can I change the hovering mouse background colour? Also, when in If you hover over it, it will say "show hidden icons". If you click on it,� In this post, the working of onmouseover event is shown by changing the colours of a paragraph by taking the mouse over a particular colour. Syntax: document.bgColor = 'nameOfColor' HTML code that will change the colour of the background when the mouse is moved over a particular colour.

Color Changes to mouse hover, It occurred to me about having an icon that, when you mouse over it, it changed colour, say from a light grey to a green for spotify, for instance, but I can't think of� Definition and Usage. The :hover selector is used to select elements when you mouse over them.. Tip: The :hover selector can be used on all elements, not only on links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.

Comments
  • is your javascript snippet correct? you've got two different variable names sources and bookEventsInfo