Issue adding multiple visualforce components to a page - css

Question

Im using a visualforce component multiple times on a page but the hover doesnt open any of the dialogs. I guess it is due to the ids but Im not sure what to do to fix.
Here is eg of the code for the visualforce component
<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">×</span>
<p><center>{!DialogMessage}</center></p>
</div>
</div>
</a>
The part that is the issue is
a.ActionObject:hover#ModalBox1 {
display:inline;
}
Ive tried using javascript and have used different methods in css such as using ~ etc but none worked
If I use javascript then somehow the javascript will need to identify the correct Id to know which component to show

Answer 1

Couple ideas you'll have to play with.
a.ActionObject:hover#ModalBox1 won't match. You don't have anything with class "ActionObject", you have element with id (<a id="ActionObject" >).
You'll have to check generated html, you're probably victim of VF mangling your IDs into something like j_id0:j_id1:j_id3:j_id58:ModalBox1 (generated from top, ID of the <apex:page> if present, else auto generated id. Then colon and ID of next element in the DOM tree). See if this helps: https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_styling_custom_using_component_id.htm
Do you have to use IDs? If you have something else unique you could maybe add record's ID as class? or "data" element
Or there's magical global variable {!$Component}, you could use it to grab the id of right element. Drop the CSS solution and instead have something like <a onmouseover="show('{!$Component}')" onmouseleave="hide('{!$Component}')">
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_access.htm
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_best_practices_accessing_id.htm