mouse hovering text box

• 

  asameenamag · Member · Nov 21, 2015 at 8:39 pm

  • Copy link
  • Add topic to favorites

  hello everyone!

  I want small text boxes to pop up when I hover with my mouse over my main menu categories, any ideas on how I can do this with the css editor only?
  I tried copying some already available online code but it wouldn’t work:

  span {
  background: none repeat scroll 0 0 #F8F8F8;
  border: 5px solid #DFDFDF;
  color: #717171;
  font-size: 13px;
  height: 30px;
  letter-spacing: 1px;
  line-height: 30px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  top: -80px;
  left: -30px;
  display: none;
  padding: 0 20px;
  }

  span:after {
  content: ”;
  position: absolute;
  bottom: -10px;
  width: 10px;
  height: 10px;
  border-bottom: 5px solid #dfdfdf;
  border-right: 5px solid #dfdfdf;
  background: #f8f8f8;
  left: 50%;
  margin-left: -5px;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  }

  p {
  margin: 100px;
  float: left;
  position: relative;
  cursor: pointer;
  }

  p:hover span {
  display: block;
  }

  Thank you
  :)

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Nov 23, 2015 at 7:15 pm

  • Copy link

  You can try the following. Each menu item has a unique menu id which you have to use in order to target each menu item individually. The first menu item on the left is the one I used in this example.

  #menu-item-59:hover:after {
      display: block;
      content: "This is some text";
      position: absolute;
      z-index: 10;
      background: #f8f8f8;
      border-right: 5px solid #dfdfdf;
      border-bottom: 5px solid #dfdfdf;
      padding: 5px;
      width: 200px;
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
  }

  You will need to find the unique menu id for each menu item and then use the above as a guide in creating the others. I used the web inspector built into my browser to find the relevant CSS. If you are not familiar with the web inspector in your browser, take a look at our support page on How to Find Your Theme’s CSS where you will find some brief screencasts to get you started with it. I find it an invaluable tool when working with CSS.