Css 向页面添加多个visualforce组件时出现问题

我在一个页面上多次使用visualforce组件，但悬停不会打开任何对话框。我想这是由于身份证，但我不知道该怎么做来修复

下面是visualforce组件的代码示例

<apex:attribute name="Contents" description="display message" type="string" required="true" assignto="{!DialogMessage}" />
<style>
        .modal {
          display: none; /* Hidden by default */
          position: fixed; /* Stay in place */
          z-index: 1; /* Sit on top */
          padding-top: 100px; /* Location of the box */
          left: 0;
          top: 0;
          width: 100%; /* Full width */
          height: 100%; /* Full height */
          overflow: auto; /* Enable scroll if needed */
          background-color: rgb(0,0,0); /* Fallback color */
          background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }
        
        /* Modal Content */
        .modal-content {
          background-color: #fefefe;
          margin: auto;
          padding: 20px;
          border: 1px solid #888;
          width: 80%;
          height: 80px;
          -moz-border-radius: 15px !IMPORTANT;
          border-radius: 15px !IMPORTANT;
        }
        
        /* The Close Button */
        .close {
          color: #aaaaaa;
          float: right;
          font-size: 28px;
          font-weight: bold;
          margin-top: -20px
        }
        
        .close:hover,
        .close:focus {
          color: #000;
          text-decoration: none;
          cursor: pointer;
        }


        a.ActionObject:hover#ModalBox1 {
            display:inline;
        }
        </style>        
        <a id="ActionObject" >        
            <img src="/s.gif" />
        <div id="ModalBox1" class="modal">
            <!-- Modal content -->
            <div class="modal-content">
                <span class="close">&times;</span>
                <p><center>{!DialogMessage}</center></p>
            </div>
        
        </div>
    </a>

The part that is the issue is 
        a.ActionObject:hover#ModalBox1 {
            display:inline;
        }

.莫代尔{
显示：无；/*默认情况下隐藏*/
位置：固定；/*保持原位*/
z指数：1；/*位于顶部*/
填充顶部：100px；/*框的位置*/
左：0；
排名：0；
宽度：100%；/*全宽*/
高度：100%；/*全高*/
溢出：自动；/*根据需要启用滚动*/
背景色：rgb（0,0,0）；/*回退色*/
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
/*模态内容*/
.模态内容{
背景色：#fefe；
保证金：自动；
填充：20px；
边框：1px实心#888；
宽度：80%；
高度：80px；
-moz边界半径：15px！重要；
边界半径：15px！重要；
}
/*关闭按钮*/
.结束{
颜色：#AAAAA；
浮动：对；
字号：28px；
字体大小：粗体；
利润上限：-20px
}
.关闭：悬停，
.结束：聚焦{
颜色：#000；
文字装饰：无；
光标：指针；
}
a、 ActionObject:悬停#ModalBox1{
显示：内联；
}
&时代；
{！DialogMessage}

问题的关键在于
a、 ActionObject:悬停#ModalBox1{
显示：内联；
}

我尝试过使用javascript，并在css中使用了不同的方法，如使用~等，但都不起作用

---

如果我使用javascript，那么javascript将需要识别正确的Id，以知道要显示哪个组件

a.ActionObject:hover#ModalBox1

不匹配。您没有任何类“ActionObject”，您有id为的元素（

您必须使用ID吗？如果您有其他唯一的内容，您可以将记录的ID添加为

class

？或元素

或者有一个神奇的全局变量，你可以用它来获取正确元素的id。放弃CSS解决方案，改为使用类似