Hover

hoverにhover時の挙動を指定できる。
- hover="{utility}"でユーティリティクラス .-hov:{utility} を出力します。。
- "fade", "dark", "shadow" などいくつかユーティリティクラスを標準で用意しています。
- "media:XXX"の形式でメディア用のホバークラスも用意しています。
  - "mediaZoom",...
  - is--transitionMediaクラスを持つ要素に対してホバー時のスタイルを指定しています。
hover={["foo", "bar"]}で複数のユーティリティクラスを出力。
hover={{c, bgc, bdc, shadow, media:{}? }} でhover時のプロパティの変化を詳細に指定可能。

ユーティリティプリセット

"fade", "dark", "shadow", "up", "scale"

Demo

単一指定してみる

hoverプロパティにユーティリティクラス用の文字列を指定する例を紹介します。

hover="fade"

<LinkBox href="#link" p="box" hover="fade">
	...
</LinkBox>

hover="shadow"

<LinkBox href="#link" p="box" hover="shadow">
	...
</LinkBox>

hover="up"

<LinkBox href="#link" p="box" hover="up">
	...
</LinkBox>

hover="scale"

<LinkBox href="#link" p="box" hover="scale">
	...
</LinkBox>

hover="dark"

<LinkBox href="#link" p="box" hover="dark">
	...
</LinkBox>

bright?

オブジェクト形式でより柔軟にhover時の挙動を指定できます

c,bgc,bdc,shadow, filter を受け取れます。

bgcを"main", cを"white"に変化させる

	<LinkBox
		href="#link"
		bgc="pale"
		p="box"
		hover={{ bgc:"main", c:"white"}}
	>...</LinkBox>

bgcを"b100", bdcを"b700"に変化させる

	<LinkBox
		href="#link"
		p="box"
		bd={{ c:"base" }}
		hover={{ bgc:"b100", bdc:"b700"}}
	>...</LinkBox>

配列で複数の値を指定可能です

hover={[ "shadow", "up" ]}

<LinkBox href="#link" p="box" hover={[ "shadow", "up" ]}>...</LinkBox>

"up" に加えて、shadow, bdc, bgc を指定

	<LinkBox
		href="#link"
		bd={{ w:"2px", c:"base" }}
		p="box"
		hover={["up", { shadow:"2", bdc:"blue", bgc: "b100" }]}
	>...</LinkBox>

MediaLayerへのホバーエフェクト

["up", "mediaBright"]

<Banner
	href='#banner-link'
	hover={["up", "mediaBright"]}
>
	<img className="is--transitionMedia" src="/img/demo-img.jpeg" alt="" width={960} height={640}/>
</Banner>

["mediaZoom", "mediaBlur"]

<Banner
	href='#banner-link'
	aspect='16/9'
	hover={["mediaZoom", "mediaBlur"]}
>
	<MediaLayer>
		<Media as={Image} isHovTarget src="/img/demo-img.jpeg" alt="" width={960} height={640} />
	</MediaLayer>
	<FilterLayer bgc="rgba(0, 0, 0, 0.4)" />
	<Layer inset="0" c="white" p="box:l">
		<DammyText length="m"/>
	</Layer>
</Banner>

※ mediaZoomをかける時は、MediaLayerを使わないと拡大した時にレイアウトが崩れる可能性があります。

reverse

reverseは、--cと--bgcを入れ替えます。（基本的には<Button>用です.）

hover="reverse"

Lorem Button

カスタムUtility

予め用意されているユーティリティ用のプリセット値以外を指定した時も、その文字列がユーティリティクラス名として出力されます。例えば、hover="hoge"とすると.-hov:hogeが出力されます。

これにより、自身でユーティリティクラスを作成してより自由にhover効果を適用可能です。

<LinkBox hover="hoge">
	...
</LinkBox>

↓ CSS

.-hov\:hoge:hover {
	/* ...自由にスタイルを... */
}

Gradient Overview