Question

我不能在页面上的两个元素上使用两个光标，有人能帮我为什么吗？

$em_category = $this->getDoctrine()->getManager();
$category = $em_category->getRepository('AppBundle:Category')->findOneBy(array('id' => ($request->get('id_category'))));

$userInterest->setCategory($category);

$em = $this->getDoctrine()->getManager();
$em->persist($userInterest);
$em->flush();

    .c-scrolldown{
        cursor:pointer;
    }
    .c-scrolldown2{
        cursor:pointer;
    }

Answer 1

只需在div中添加一些内容并更改所需的光标即可。

.c-scrolldown{
   cursor: pointer;
}
.c-scrolldown2{
   cursor: progress;
}

<div class="c-scrolldown2" id="pointer-cursor">
    Test 1 
    <div class="c-line2"></div>
</div>
<div class="c-scrolldown">
    Test 2 
    <div class="c-line"></div>
</div>

Here，您可以找到许多不同的鼠标光标。

Answer 2

可以。您只需要为DIV添加一些内容或定义高度（在您的代码中，DIV的高度为零）：

.c-scrolldown,
.c-scrolldown2 {
  height: 200px;
  background: #ddd;
}

.c-scrolldown {
  cursor: pointer;
}

.c-scrolldown2 {
  cursor: crosshair;
}

<div class="c-scrolldown2" id="pointer-cursor">
  <div class="c-line2"></div>
</div>
<br>
<div class="c-scrolldown">
  <div class="c-line"></div>
</div>

Answer 3

如果要使用不同的元素，可以对不同的元素使用不同的光标。

<html>
<head>
<style>
.c-scrolldown{
cursor:pointer;
}
.c-scrolldown2{
cursor:crosshair;
margin-bottom:30px;
}</style>
</head>
<body>
<div class="c-scrolldown2" id="pointer-cursor">
<div class="c-line2">Crosshair</div>
</div>
<div class="c-scrolldown">
<div class="c-line">Pointer</div>
</div>
<body>
<html>

同一页面中不同元素中的两个不同光标

3 个答案: