如何让特定的 div 做某事？

Question

<!DOCTYPE html>
<head>
<title>Document</title>
</head>
<body>
    <div class="container">
    <div class="gethover"></div>
    <div class="gethover"></div>
    <div class="gethover"></div>
    <div class="gethover"></div> 
</div>
</body>
</html>

嘿伙计们，我只想让这些 div 中的一个在鼠标悬停在上面时悬停...我的意思是当我们悬停其中一个时，其他的不会悬停.. .我该怎么办？

Answer 1

这个问题不是很详细，如果这个答案不能回答你想问的问题，请告诉我们，我们可以帮助你。

但是，如果你想制作悬停效果，你可以使用:hover

gethover:hover{
   // attributes...
}

如果你想在悬停时实现一个js代码，你可以通过

实现

onmouseover="doSth()"

Answer 2

据我所知，您想给相同的 class 名称，但又想为它们保留不同的 css hover 特征。你可以使用这个选择器

.gethover:first-of-type:hover {
  background: red;
}
.gethover:nth-of-type(2):hover {
  background: blue;
}
.gethover:nth-of-type(3):hover {
  background: yellow;
}

<!DOCTYPE html>
<head>
<title>Document</title>
</head>
<body>
    <div class="container">
    <div class="gethover">1</div>
    <div class="gethover">2</div>
    <div class="gethover">3</div>
</div>
</body>
</html>

Answer 3

如果您想要特定的 div 在 :hover 悬停时对 css 选择器作出反应。例如

your.css

.gethover {
  background-color: #fff;
}

.gethover:hover {
  background-color: #ff0000;
}

要查看它是否正常工作，请向 div 添加一些内容。例如

<div class="gethover">ONE</div>
<div class="gethover">TWO</div>
<div class="gethover">THREE</div>
<div class="gethover">FOUR</div>

在悬停选择器上查看更多内容 here

如何让特定的 div 做某事？

How to make a specific div do something?

html

css