Question

我在将悬停背景放入img时遇到问题。

它应如下所示：Navigation

这两行代表悬停透明图像，文字“home”应该位于img的中心..我不知道该怎么做...有人吗？

对不起，如果我的英语不好

    
    <header>
        <div class="logo">
            <img src="img/logo.png"/>
        </div>
        
        <nav>
            <div class="page-container">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">O Podjetju</a></li>
                    <li><a href="#">Produkti</a></li>
                    <li><a class="last-child" href="#">Kontakti</a></li>
                </ul>
            </div>
        </nav>
    </header>

{{1}}

Answer 1

just add the following css styles 

a:hover {
    height: 75px;
    text-decoration: none;
    color: #9E9E9E;
    background: url(http://i.imgur.com/P5tF09r.png) no-repeat center;
    /*****************here they are ************/
    display:flex;
    align-items: center;


}

Answer 2

为什么你不能用css制作它？像这样的东西

＆＃13;

.menu{
  list-style: none;
  background-color: #EAEAEA;
  margin: 0;
  padding: 20px 0;
  overflow: hidden;
}

.menu__item{
  float: left;
  margin: 0 20px;
  position: relative;
}

.menu__item a{
  background-color: #EAEAEA;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

.menu__item::after{
  content:'';
  width: 1px;
  height: 1px;
  background-color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: rotate(-45deg);
  z-index: 0;
  transition: all .25s ease;
}

.menu__item:hover::after{
  width: 50px;
  margin: -1px 0 0 -25px;
}

＆＃13;

<ul class="menu">
  <li class="menu__item"><a>Home</a></li>
  <li class="menu__item"><a>test</a></li>
  <li class="menu__item"><a>very long title for test</a></li>
  <li class="menu__item"><a>test</a></li>
</ul>

＆＃13;

HTML / CSS悬停背景图像

2 个答案: