asp.net CSS同時突出顯示菜單和麪板。

我有一個菜單和一個hovermenuextender。當鼠標懸停在菜單1上時，面板會下降，但當我將光標移動到面板時，菜單中的高光會消失。所以我的目標是讓面板突出顯示菜單。該視頻正體現了我的意思：http://screencast.com/t/Bhfj6mtZkPZp asp.net CSS同時突出顯示菜單和麪板。

代碼：

菜單

<div id="Menu"> 
    <a href="Page1.aspx"> 
    <div class="menu-item" id="menu1" runat="server"> 
     <span class="menu-text">Page1</span> 
    </div> 
</a>

面板

<asp:Panel CssClass="panel" ID="pnPanel" runat="server"> 
    <div id="panelarea">  
     <a href="Panelmenu1.aspx"> 
      <div class="panel-item"> 
       <span class="panel-text">Panel menu 1</span> 
      </div> 
     </a> 
</div>

Hovermenuextender

<asp:HoverMenuExtender ID="HoverMenuExtender" runat="server" PopupControlID="pnPanel" PopupPosition="Bottom" OffsetX="0" OffsetY="0" PopDelay="50" TargetControlID="menu1"></asp:HoverMenuExtender>

CSS

.menu-item 
{ 
    text-decoration: none; 
    width: 225px; 
    height: 55px; 
    float: left; 
} 

.menu-item:hover 
{ 
    background-image: url('img/menu-item.png'); 
} 

.panel-item 
{ 
    width: 225px; 
    height: 25px; 
    background-color: #626262; 
} 

.panel-item:hover 
{ 
    background-color: black; 
}

什麼，我一直在努力

.menu-item > .panel-item:hover a 
    { 
    background-image: url('img/menu-item.png'); 
    } 

    .menu-item .panel-item:hover 
    { 
    background-image: url('img/menu-item.png'); 
    }

我注意到有其他人有類似的問題; B他們沒有一個人爲我工作。我真的希望你瞭解我的問題和我的代碼。

來源

2013-07-30 dumbel

http://stackoverflow.com/questions/17525314/navigation-menu-css-loads-slowly-causes-it-to-align-vertically-for-a-few-second – falguni

如果您使用任何腳本，打開下拉菜單時，項徘徊以下解決方案可以幫助

添加一個類名菜單項時，懸停

$(".menu-item").hover(function(){ 
     $(this).addClass('menuHighlighted'); 
    }, 
    function(){ 
     $(this).removeClass('menuHighlighted'); 
    } 
);

當列表項目強調

$(".list-item").hover(function(){ 
     $(this).addClass('listHighlighted'); 
     $(this).parents('.menu-item').addClass('menuHighlighted'); 
    }, 
    function(){ 
     $(this).removeClass('listHighlighted'); 
     $(this).parents('.menu-item').removeClass('menuHighlighted'); 
    });

CSS

.menuHighlighted{ 
    background-image: url('img/menu-item.png'); 
} 
.listHighlighted{ 
    background-color: black; 
}

來源

2013-07-30 12:17:46 Venugopal

這工作，但當懸停時.menu項目更改爲懸停圖像。 – dumbel

現在已經嘗試了一段時間了。由於某些原因，我的面板項目（listHighlighted）不會突出顯示。 – dumbel

如果你用你的html創建一個小提琴會很有幫助 – Venugopal

答案Venu Gopal解決方案。

我有兩種不同的方式，即「一些什麼工作」，差不多。

<script type="text/javascript"> 
    $(window).load(function() { 
    $(".menu-item").hover(function() { 
    $(this).addClass('menuHighlighted'); 
    }, 
    function() { 
    $(this).removeClass('menuHighlighted'); 
    }); 

    $(".panel-item").hover(function() { 
    $(this).addClass('listHighlighted'); 
    $(this).parents('.menu-item').addClass('menuHighlighted'); 
}, 
    function() { 
    $(this).removeClass('listHighlighted'); 
    $(this).parents('.menu-item').removeClass('menuHighlighted'); 
}); 
}); 
</script>

在實施例編號1的菜單鏈接懸停在面板時，不突出顯示。

<script type="text/javascript"> 
$(window).load(function() { 
    $(".menu-item").hover(function() { 
    $(this).addClass('menuHighlighted'); 
}); 

$(".panel-item").hover(function() { 
    $(this).addClass('listHighlighted'); 
    $(this).parents('.menu-item').addClass('menuHighlighted'); 
}, 
function() { 
    $(this).removeClass('listHighlighted'); 
    $(this).parents('.menu-item').removeClass('menuHighlighted'); 
}); 
});

例2中一切工作，因爲我想要的，但菜單保持甚至壽鼠標未在菜單中的亮點。

這兩者之間的區別是，我刪除了代碼：

function() { 
$(this).removeClass('menuHighlighted');

從〔實施例1 現在任何建議將幫助我。

來源

2013-07-30 16:14:08 dumbel

asp.net CSS同時突出顯示菜單和麪板。

回答

相關問題