简体   繁体   English

如何将文本悬停在自定义形状上?

[英]How do I have text hover over a custom shape?

<script>
    ctx.fillStyle = 'rgb(82, 77, 76,0.5)';
    ctx.fillRect(15, 135, 720, 600);
</script>

<html>
    <body>
        <div Id = "text">
           <ul>
              <li>example1 </li>
              <li> example 2</li>
           </ul>
        </div>
    </body>
</html>

<style>
    .text [Z-index: 1;]
</style>

So I want this little text list to be on top of my custom simple rectangle shape but it just doesn't go on top!所以我希望这个小文本列表位于我自定义的简单矩形形状的顶部,但它只是不在顶部! What can I do?我能做什么?

In your CSS you are selecting .text when you should really be selecting #text, since it's an ID.在您的 CSS 中,当您真正应该选择 #text 时,您选择了 .text,因为它是一个 ID。 You're also using brackets ( [ ] ) instead of curly braces ( { } ) in your CSS.您还在 CSS 中使用方括号 ( [ ] ) 而不是花括号 ( { } )。

Also, it should be另外,应该是

<div id="text">

Since you don't want to capitalize 'id'.因为你不想大写'id'。

 <html>
    <div style="position: absolute">
`<div id = "text">
<ul> 
    <li>example1</li>
    <li>example2</li>
     </ul>
</div>
</div>
</html>

It's actually quite simple.其实很简单。 All you have to do is have another div wrapping the html code indicating that the position is absolute.您所要做的就是用另一个 div 包装 html 代码,指示位置是绝对的。 Doesn't work on CSS for some reason but this HTML will do.由于某种原因在 CSS 上不起作用,但这个 HTML 可以。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM