Semantic-UI Menu Hover State

Last Updated : 29 Mar, 2022

Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts. Semantic UI Menu is a group of elements that displays different navigation actions. We can navigate to different pages of the website. A menu can be a combination of links, a search bar, and dropdowns. Semantic UI Menu Hover State provides a hover animation on the links. Items with links or class name links are hoverable.

Semantic UI Menu Hover State Classes:

a: Elements with a tag have the hover state.
link: Elements with this class the hover state.

Syntax: Make the elements as a links or link class as follows:

<div class="ui compact menu">
    <a class="item" href="#"> ... </a>
    <div class="link item"> ... </div>
</div>

Example: In the following example, we have some links with the hover state and the last item does not have the hover state.

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <link
      rel="stylesheet"
      href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
    /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
</script> 
  </head> 
  
  <body> 
    <div class="ui container"> 
      <center> 
        <div class="ui header green"> 
          <h1>GeeksforGeeks</h1> 
        </div> 
        <strong>Semantic UI Menu Hover State</strong> 
        <br /> 
        <br /> 
      </center> 
  
      <div class="ui compact menu"> 
        <div class="header item"> 
          GeeksforGeeks 
        </div> 
        <a
          class="item"
          href="https://www.geeksforgeeks.org/data-structures"
          target="_blank"
        > 
          Data Structures 
        </a> 
        <a
          class="item"
          href="https://www.geeksforgeeks.org/fundamentals-of-algorithms"
          target="_blank"
        > 
          Algorithms 
        </a> 
        <div class="link item"> 
          Machine Learning 
        </div> 
        <div class="item"> 
          Java 
        </div> 
      </div> 
    </div> 
  </body> 
</html> 