Question

如果我有一个带有Home，Oil，Coal和Natural气体的导航栏，我需要这样做，当我将鼠标悬停在油上时，它会使该盒子的背景图像成为油滴或其他东西，并且如果我将鼠标悬停在煤炭上，它将在该特定方框中显示煤炭的背景图像。

这是我的代码到目前为止，但无论我将鼠标悬停在什么位置，它目前都显示相同的图像（油）：

＆＃13;

#NavBar ul {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
#NavBar li {
  width: 100px;
  float: left;
}
#NavBar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
}
#NavBar a:hover {
  background-color: #111;
  background-image: url("billeder/olie_navbar.png");
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
}

＆＃13;

<div id="NavBar">
  <ul>
    <li><a href="index.html">Hjem</a>
    </li>
    <li><a href="olie.html">Olie</a>
    </li>
    <li><a href="kul.html">Kul</a>
    </li>
    <li><a href="naturgas.html">Naturgas</a>
    </li>
  </ul>
</div>

＆＃13;

Answer 1

您需要为导航中的每个项目创建ID或类，如下所示：

<div id="NavBar">
  <ul>
    <li><a href="index.html">Hjem</a>
    </li>
    <li><a class="olie" href="olie.html">Olie</a>
    </li>
    <li><a class="kul" href="kul.html">Kul</a>
    </li>
    <li><a class="naturgas" href="naturgas.html">Naturgas</a>
    </li>
  </ul>
</div>

然后相应地分配background-image：

#NavBar olie:hover {
  background-color: #111;
  background-image: url("billeder/olie_navbar.png");
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
}


#NavBar kul:hover {
  background-color: #111;
  background-image: url("billeder/kul_navbar.png");
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
}


#NavBar naturgas:hover {
  background-color: #111;
  background-image: url("billeder/naturgas_navbar.png");
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
}

这样每个a标记都可以具有不同的悬停状态

Answer 2

你应该给每个元素一个自己的id。然后根据其id为每个id提供背景图像。

//go to the file and extract the X and Y points
StreamReader file = new StreamReader(openFileDialog1.OpenFile());
string line = "";
Series filePoints = new Series();
while ((line = file.ReadLine()) != "")
{
    //find the dot so that you know were to split the string
    int split = line.IndexOf(".");
    float X = float.Parse(line.Substring(0, split)),
        Y = float.Parse(line.Substring(split + 1, line.Length - (split + 1)));

    //add the points
    filePoints.Points.AddXY(X, Y);
}

#Hjem:hover{
  background-image: url("Hjem.png");
}

#Olie:hover{
  background-image: url("Olie.png");
}

#Kul:hover{
  background-image: url("Kul.png");
}

#Naturgas:hover{
  background-image: url("Naturgas.png");
}

#NavBar ul {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
#NavBar li {
  width: 100px;
  float: left;
}
#NavBar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
}

#NavBar a:hover {
  background-color: #111;
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
}

Answer 3

因此，您的标记实际上并不允许对单个标记进行任何特定定位， - 基本上您的CSS会定位每个列表项，而不是特定的列表项。

我对你的代码进行了一些修改， - 为每个li标签添加了一个类 - 为每个类添加了一个css选择器

希望你能从这里看到从哪里拿到它。

li.hjem a:hover {
  background-image: url("billeder/hjem_navbar.png");
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
}
li.olie a:hover {
  background-image: url("billeder/olie_navbar.png");
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
}
li.kul a:hover {
  background-image: url("billeder/kul_navbar.png");
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
}
li.Naturgas a:hover {
  background-image: url("billeder/Naturgas_navbar.png");
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: center;
}

<div id="NavBar">
  <ul>
    <li class="hjem"><a href="index.html">Hjem</a>
    </li>
    <li class="olie"><a href="olie.html">Olie</a>
    </li>
    <li class="kul"><a href="kul.html">Kul</a>
    </li>
    <li class="naturgas"><a href="naturgas.html">Naturgas</a>
    </li>
  </ul>
</div>

CSS使特定图像显示在特定导航栏上

3 个答案: