Clash Royale CLAN TAG#URR8PPP

CSS :hover and bootstrap 3

I'm making a navbar in bootstrap 3 and I found something weird.

<nav className="navbar navbar-inverse">
<div className="container-fluid">
<div className="container">
<div className="row">
<div className="col-sm-3">
<a href="#">
Home
</a>
</div>
<div className="col-sm-3">
<a href="#">
About us
</a>
</div>
<div className="col-sm-3">
<a href="#">
Surveys
</a>
</div>
<div className="col-sm-3">
<a href="#">
Statistics
</a>
</div>
</div>
</div>
</div>


This is structure of this component and here is CSS, where I try to make <a> attribute larger on :hover

<a>

:hover

a:hover
text-decoration: none;
color: inherit;
transform: scale(1.1);



And I can't help wondering why despite others attributes working, transform shows no effect. Not sure if it changes anything, but maybe I'll add that I use React for this application.

1 Answer
1

Only elements positioned by the box model can be transformed. As a rule of thumb, an element is positioned by the box model if it has display: block. Source

You can also use display: inline-block;.

display: inline-block;

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.