CSS - 将悬停状态保持在“不停歇”状态？

我有一排5格，当你悬停在一个，它填补了屏幕的宽度。 6 Multicolored Divs CSS - 将悬停状态保持在“不停歇”状态？

蓝色div默认填充屏幕宽度;这样的画面总是满满的，我可以申请CSS萎缩下来，当我将鼠标悬停在其他div的，因为它宣布最后在HTML：

#green{ 
    width:20px; 
} 
#blue{ 
    width:100%; 
} 
#green:hover{ 
    width:100% 
} 
#green:hover ~ #blue{ 
    width:20px; 
}

有没有办法让后一个DIV打开是“隐藏”？例如，如果橙色的div已经打开，并且鼠标离开它，但不是到另一个彩色div，它可以保持其全宽。目前，当鼠标滑落时，div滑回蓝色。

另外，我可以做到这一点没有任何脚本？

来源

2013-04-06 user1231779

没有任何脚本？我不这么认为... – 2013-04-06 01:21:42

不，你不能没有JavaScript。但这里是你可以使用一些示例代码：

<div id="green" onmouseover="green()">foo</div> 

<div id="blue" onmouseover="blue()">more foo</div> 

<div id="pink" onmouseover="pink()">even more foo</div>

和脚本：

function green() { 
    $('div').css('width','20px'); 
    $('#green').css('width','100%'); 
} 

function blue() { 
    $('div').css('width','20px'); 
    $('#blue').css('width','100%'); 
} 

function pink() { 
    $('div').css('width','20px'); 
    $('#pink').css('width','100%'); 
}

希望这有助于！

来源

2013-04-06 01:45:49

太棒了！这工作完美。我不知道任何JavaScript，但我知道了。我不得不用$以“document.getElementById ...”开头的行，但除此之外，真棒！ – user1231779 2013-04-06 23:03:09

如果您没有可用的JQuery（$），那么您可能需要做更多的转换;一行可能是“... byId（'blue'）。style.width ='100％';”。如果它适合你，你可能已经明白了。 – Katana314 2013-11-15 17:22:40

是的，你可以通过使用CSS动画来完成而不需要脚本。请参阅http://cdpn.io/GLjpK

它不像使用脚本那样可靠，但可以 - 即使在悬停后保留它，这也是一个具有挑战性的部分。

来源

2013-11-15 17:11:13 morewry

CSS - 将悬停状态保持在“不停歇”状态？

回答

相关问题