0
我有一個網頁，我有一些divs，這是在頁面上的瓷磚。 這些全部浮動到左側，根據登錄到頁面上的用戶權限，只顯示如此多的圖塊。Html css重疊div
這些圖塊在懸停時顯示子選項，用戶可以點擊並導航。
我想要展開的頁面中有一個圖塊，當我使用Javascript進行懸停時，這個圖塊的css類改變了。
我的問題是，我希望這個新的較大的瓷磚重疊頁面上的其他較小的瓷磚。我現在唯一能做的就是在頁面上的其他圖塊下顯示，而不是重疊它們。
下面是我的代碼：
<center>
<asp:Table id="Table2" height="1000" align="center" table-layout="auto" style="margin-top: 25px;" max-width="1000" runat="server">
<asp:TableRow>
<asp:TableCell width="1000">
<xsl:if test="contains($allowedPermissions, '2147483569') or contains($allowedPermissions, '2147483560') or contains($allowedPermissions, '2147483497')">
<div class="smalltile" align="center" id="receipting" style="padding-right: 10px;" onmouseover="receiptingHover();" onmouseout="receiptingHoverOut();">
<br/>
<label id="receiptlabel" style="position: relative; top: 37px;" class="menuLabelFont">Receipting</label>
<xsl:if test="contains($allowedPermissions, '2147483569')">
<a href="javascript:Submit('../Payments/CashIntranetPayments.aspx','../Common/','');" title="Take customer present and customer not present payments using all payment types" style="cursor: pointer;" class="menuLabelInitiallyHidden" id="browserreceiptinglabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Receipting</a>
<br/>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483560')">
<a href="javascript:Submit('javascript:Submit('../Sales/LaunchIntranet.aspx','../Common/','');" title="Display your sale forms in Intranet (not internet) mode and pay using the Card Payments module" style="cursor: pointer;" class="menuLabelInitiallyHidden" id="intraneteformslabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Intranet eForms</a>
<br/>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483497')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=CCPProfiles.xml','../Common/','');" title="CCPPlan Configuration" style="cursor: pointer;" class="menuLabelInitiallyHidden" id="ccpplans" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">CCP Instalment Plans</a>
</xsl:if>
</div>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483568')">
<a href="javascript:Submit('../Reporting/SelectReport.aspx','../Common/','');" title="PARIS Reports Library">
<div class="smalltile" align="center" id="reporting" style="cursor: pointer; padding-top: 57px; padding-right: 10px;" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">
<span id="reportinglabel" class="menuLabelFont">Reporting</span>
</div>
</a>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483565') or contains($allowedPermissions, '2147483567') or contains($allowedPermissions, '2147483565') or contains($allowedPermissions, '2147483567')">
<div class="smalltile" align="center" id="sundryincomereturns" style="padding-right: 10px;" onmouseover="sundryIncomeHover();" onmouseout="sundryIncomeHoverOut();">
<br/>
<label id="sundrydebtorslabel" style="position: relative; top: 37px;" class="menuLabelFont">Sundry Income Returns</label>
<!--<xsl:if test="contains($allowedPermissions, '2147483565')">
<a href="javascript:Submit('../PARISMVC/Reconciliation/Reconciliation/index','../Common/','');" title="Manage Reconciliation of Sundry Income Returns" style="cursor: pointer;" class="menuLabelInitiallyHidden" id="reconciliationlabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Reconciliation</a>
<br/>
<br/>
</xsl:if>-->
<!--<xsl:if test="contains($allowedPermissions, '2147483567')">
<a href="javascript:Submit('../PARISMVC/Returns/Home/Index','../Common/','');" title="Manage Sundry Income Returns" style="cursor: pointer;" class="menuLabelInitiallyHidden" id="sundryincomelabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Returns</a>
<br/>
<br/>
</xsl:if>-->
<xsl:if test="contains($allowedPermissions, '2147483565')">
<a href="javascript:Submit('../PARISMVC/Reconciliation/Reconciliation/index','../Common/','');" title="Manage Reconciliation of Online Returns" style="cursor: pointer;" class="menuLabelInitiallyHidden" id="reconversionone" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Reconciliation</a>
<br/>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483567')">
<a href="javascript:Submit('../PARISMVC/Returns/Home/Index','../Common/','');" title="Manage Online Returns" style="cursor: pointer;" class="menuLabelInitiallyHidden" id="returnsversionone" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Returns</a>
</xsl:if>
</div>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483566')">
<div class="smalltile" align="center" id="transactions" style="padding-right: 10px;" onmouseover="transactionsHover();" onmouseout="transactionsHoverOut();">
<br/>
<label id="transactionslabel" style="position: relative; top: 37px;" class="menuLabelFont">Transactions</label>
<xsl:if test="contains($allowedPermissions, '2147483566')">
<a href="javascript:Submit('../Explorer/SelectTable.aspx?tablemenufile=transactions%20table%20menu.xml','../Common/','');" title="Examine the receipting transactions" style="cursor: pointer;" class="menuLabelInitiallyHidden" id="viewtransactiondatalabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">View Transactions</a>
<br/>
<br/>
<a href="javascript:Submit('../Explorer/SelectTable.aspx?tablemenufile=saleforms.xml&foldername=Sales/Transactions','../Common/','');" title="View sale form transactions by type of sale form" style="cursor: pointer;" class="menuLabelInitiallyHidden" id="vieweformtransactiondatalabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">View eForm Transactions</a>
</xsl:if>
</div>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483613') or contains($allowedPermissions, '2147483564')">
<div class="smalltile" align="center" id="suspense" style="padding-right: 10px;" onmouseover="suspenseHover();" onmouseout="suspenseHoverOut();">
<br/>
<label id="suspenselabel" style="position: relative; top: 37px;" class="menuLabelFont">Suspense</label>
<xsl:if test="contains($allowedPermissions, '2147483613')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=suspenseclearing.xml','../Common/','');" title="Manage your suspended transaction" style="cursor: pointer;" class="menuLabelInitiallyHidden" id="commonsuspenseclearanceslabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Common Suspense Clearances</a>
<br/>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483564')">
<a href="javascript:Submit('../Suspense/EditSuspenseTran.aspx','../Common/','');" title="Manage your suspended transaction" style="cursor: pointer;" class="menuLabelInitiallyHidden" id="suspendedtransactionslabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Suspended Transactions</a>
</xsl:if>
</div>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483594')">
<a href="javascript:Submit('../Transfer/Transfer.aspx','../Common/','');" title="Manage transaction transfers">
<div class="smalltile" align="center" id="transfer" style="cursor: pointer; padding-top: 57px; padding-right: 10px;" onmouseover="highlightOrange(this);" onmouseleave="unHighlightOrange(this);">
<img class="images" id="transfericon"
<span id ="transferlabel" class="menuLabelFont">Transfer</span>
</div>
</a>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483642') or contains($allowedPermissions, '2147483640') or contains($allowedPermissions, '2147483536') or contains($allowedPermissions, '2147483499') or contains($allowedPermissions, '2147483511') or contains($allowedPermissions, '2147483577') or contains($allowedPermissions, '2147483576') or contains($allowedPermissions, '2147483630') or contains($allowedPermissions, '2147483627') or contains($allowedPermissions, '2147483586') or contains($allowedPermissions, '2147483617') or contains($allowedPermissions, '2147483584') or contains($allowedPermissions, '2147483605') or contains($allowedPermissions, '2147483608') or contains($allowedPermissions, '2147483606') or contains($allowedPermissions, '2147483500') or contains($allowedPermissions, '2147483498')">
<center>
<div class="smalltile" align="center" id="admin" style="overflow: hidden; padding-right: 10px;" onmouseover="adminHover();" onmouseleave="outOfAdmin(); adminHoverOut();">
<br/>
<img class="imageswithsub" id="adminicon"
<label id="adminlabel" style="position: relative; padding-bottom: 4px;" class="adminFont">Admin</label>
<xsl:if test="contains($allowedPermissions, '2147483642') or contains($allowedPermissions, '2147483640')">
<div class="smalladmintile" align="center" id="admin1" style="overflow: hidden; padding-right: 10px; display: none;">
<br/>
<xsl:if test="contains($allowedPermissions, '2147483642')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=bankaccounts.xml','../Common/','');" title="Bank Account Configuration" style="cursor: pointer;" class="adminlabel" id="bankaccountslabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Bank Accounts</a>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483640')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=bankitems.xml','../Common/','');" title="Bank Item Configuration" style="cursor: pointer;" class="adminlabel" id="bankitemconfigurationlabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Bank Item Configuration</a>
<br/>
</xsl:if>
</div>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483536') or contains($allowedPermissions, '2147483499')">
<div class="smalladmintile" align="center" id="admin2" style="overflow: hidden; padding-right: 10px; display: none;">
<br/>
<xsl:if test="contains($allowedPermissions, '2147483536')">
<a href="javascript:Submit('../ParisConfiguration/Bureau.aspx','../Common/','');" title="Bureau" style="cursor: pointer; width: 250px;" class="adminlabel" id="bureaulabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Bureau</a>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483499')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=bureaupaymentcard.xml','../Common/','');" title="Bureau Payment Card Configuration" style="cursor: pointer;" class="adminlabel" id="bureaupaymentcardlabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Bureau Payment Card</a>
<br/>
</xsl:if>
</div>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483498') or contains($allowedPermissions, '2147483511')">
<div class="smalladmintile" align="center" id="admin3" style="overflow: hidden; padding-right: 10px; display: none;">
<br/>
<xsl:if test="contains($allowedPermissions, '2147483498')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=CCPTemplates.xml','../Common/','');" title="CCPTemplate Configuration" style="cursor: pointer;" class="adminlabel" id="ccptemplateslabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">CCP Templates</a>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483511')">
<a href="javascript:Submit('../ParisConfiguration/PayPal.aspx','../Common/','');" title="PayPal" style="cursor: pointer;" class="adminlabel" id="paypallabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">PayPal</a>
<br/>
</xsl:if>
</div>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483577') or contains($allowedPermissions, '2147483576')">
<div class="smalladmintile" align="center" id="admin4" style="overflow: hidden; padding-right: 10px; display: none;">
<br/>
<xsl:if test="contains($allowedPermissions, '2147483577')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=depositmethods.xml','../Common/','');" title="Deposit Methods Configuration" style="cursor: pointer;" class="adminlabel" id="depositmethodslabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Deposit Methods</a>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483576')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=financialperiod.xml','../Common/','');" title="Financial Periods Configuration" style="cursor: pointer;" class="adminlabel" id="financialperiodslabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Financial Periods</a>
<br/>
</xsl:if>
</div>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483630') or contains($allowedPermissions, '2147483584') or contains($allowedPermissions, '2147483627')">
<div class="smalladmintile" align="center" id="admin5" style="overflow: hidden; padding-right: 10px; display: none;">
<br/>
<xsl:if test="contains($allowedPermissions, '2147483584')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=returnform.xml','../Common/','');" title="Return Form" style="cursor: pointer;" class="adminlabel" id="returnformlabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Return Form</a>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483630')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=grouping.xml','../Common/','');" title="Grouping Configuration" style="cursor: pointer;" class="adminlabel" id="groupinglabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Grouping</a>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483627')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=location.xml','../Common/','');" title="Locations Configuration" style="cursor: pointer;" class="adminlabel" id="locationslabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Locations</a>
<br/>
</xsl:if>
</div>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483586')">
<div class="smalladmintile" align="center" id="admin6" style="overflow: hidden; padding-right: 10px; display: none;">
<br/>
<xsl:if test="contains($allowedPermissions, '2147483586')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=miscellaneouscode.xml','../Common/','');" title="Miscellaneous Configuration" style="cursor: pointer;" class="adminlabel" id="miscconfiglabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Miscellaneous Configuration</a>
<br/>
</xsl:if>
</div>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483500')">
<div class="smalladmintile" align="center" id="admin7" style="overflow: hidden; padding-right: 10px; display: none;">
<xsl:if test="contains($allowedPermissions, '2147483500')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=integrator.xml','../Common/','');" title="Integrator Configuration" style="cursor: pointer;" class="adminlabel" id="integratorslabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Integrators</a>
<br/>
</xsl:if>
</div>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483617') or contains($allowedPermissions, '2147483605') or contains($allowedPermissions, '2147483608') or contains($allowedPermissions, '2147483606')">
<div class="smalladmintile" align="center" id="admin8" style="overflow: hidden; padding-right: 10px; display: none;">
<xsl:if test="contains($allowedPermissions, '2147483605')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=group.xml','../Common/','');" title="Security Groups" style="cursor: pointer;" class="adminlabel" id="securitygroupslabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Security Groups</a>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483608')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=user.xml','../Common/','');" title="User Management Configuration" style="cursor: pointer;" class="adminlabel" id="usermanagementlabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">User Management</a>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483617')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=restrictedtask.xml','../Common/','');" title="Restricted Task" style="cursor: pointer;" class="adminlabel" id="restrictedtasklabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Restricted Task</a>
<br/>
</xsl:if>
<xsl:if test="contains($allowedPermissions, '2147483606')">
<a href="javascript:Submit('../Explorer/ViewTable.aspx?tablepath=workstations.xml','../Common/','');" title="Workstations Configuration" style="cursor: pointer;" class="adminlabel" id="workstationslabel" onmouseover="highlightOrange(this);" onmouseout="unHighlightOrange(this);">Workstations</a>
<br/>
</xsl:if>
</div>
</xsl:if>
</div>
</center>
</xsl:if>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</center>
我有這些div內的一些圖片，但已經刪除了這些。
CSS：
.smalltile
{
height: 20%;
width: 30%;
background-color: #493084;
float: left;
margin: 5px;
list-style-type: none;
z-index: -1;
/*position: relative;*/
}
.smalladmintile
{
height: 25%;
width: 32%;
background-color: #493084;
float: left;
margin: 5px;
list-style-type: none;
z-index: -1;
}
.largetile
{
height: 60%;
width: 80%;
background-color: #493084;
margin: 5px;
text-align: center;
/*position: absolute;*/
float: left;
top: auto;
border-style: solid;
border-color: white;
padding-top: 15px;
padding-left: 35px;
padding-right: 15px;
z-index: 1000;
}
.adminlabel
{
font-family: Verdana,Arial,"serif";
font-size: 18px;
display: none;
color: white;
}
.menuLabelFont
{
color: white;
float: left;
padding-top: 50px;
padding-left: 10px;
font-family : Verdana,Arial,"serif";
font-size: 18px;
}
.adminFont
{
color: white;
float: left;
padding-top: 93px;
padding-left: 10px;
font-family : Verdana,Arial,"serif";
font-size: 18px;
}
.menuLabelInitiallyHidden
{
color: white;
float: right;
font-family: Verdana,Arial,"serif";
font-size: 18px;
display: none;
}
在我的JavaScript函數我有下面的代碼行更改CSS類管理員瓷磚：
setTimeout(function(){document.getElementById('admin').className = 'largetile'; }, menuDelayTimeout);
我怎麼會去得到這個大瓦重疊頁面上的其他div tile並且不顯示在下面？
任何幫助將不勝感激。
乾杯， 邁克
你有相當多的代碼那裏，麥克。如果您針對您遇到的問題進行了現場抽樣，那麼我們可以更輕鬆地進行調試。 – Shomz
同意。我想使用他的代碼，但不想重新創建它。 –
這裏是我一直在處理的小提琴： https://jsfiddle.net/latherrarge/9v7de9cb/3/ 雖然我還沒有能夠讓小提琴充分工作，但Javascript函數未能發射，當懸停在管理員磁貼上。當您將鼠標懸停在此圖塊上時，我想要發生的是管理圖塊的css類更改爲大圖塊類，它應與所有其他圖塊重疊而不影響任何圖塊的佈局。 – Mike