On Fri, Aug 17, 2012 at 9:30 PM, David Hucklesby <huckle...@gmail.com>wrote:
> On 8/17/12 6:25 PM, Kyle Sessions wrote:
>
>> Hi all,
>>
>> I was wondering if one of you might have some insight into this problem
>> I'm
>> experiencing. I'm using the Twitter Bootstrap CSS and Javascript to toggle
>> a list of items on my website. We display a few items in a list, and then
>> have a "More" link to display the rest of the items. The showing/hiding of
>> the rest of the items is controlled via bootstrap-transition.js and
>> bootstrap-collapse.js. This is all working well enough. The problem is
>> that, in my markup, I actually have a "More" link _and_ a "Fewer" link. I
>> want to hide the "Fewer" link when the additional list is closed, and hide
>> the "More" link when the additional list is open. I'm using the following
>> CSS to control the showing and hiding of the links (I have a live example
>> that I'll link to at the end of this, but here's some code if you don't
>> want to follow the link):
>>
>> .collapse+.switch>.more {display:inline;}
>> .collapse+.switch>.fewer {display:none;}
>> .in.collapse+.switch>.more {display:none;}
>> .in.collapse+.switch>.fewer {display:inline;}
>>
>> [...]
>
>>
>> The actual problem is that, when the list is closed, and I click on "More"
>> to open it, "More" does not disappear until I mouse over it. ...
>>
>
> Yes. Very odd. Same in Safari 6 (Mac).
>
> Anyway, simplifying the CSS a bit, this seems to work as you wish:
>
> .switch>.more {display:inline;}
> .switch>.fewer {display:none;}
> .in+.switch>.more {display:none;}
> .in+.switch>.fewer {display:inline;}
Thanks, David! That does seem to totally fix the issue. How bizarre.
Just purely out of curiosity (and hoping to avoid this in the future), does
anyone have any ideas _why_ this was happening? Is it maybe just a case of
Chrome not wanting to deal with more-complicated CSS unless / until it has
to? I have no idea.
Thanks,
Kyle
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
