Как добавить изображение SVG, чтобы оно выделялось при наведении - PullRequest
Новая
       55

Как добавить изображение SVG, чтобы оно выделялось при наведении

1 голос
/ 04 ноября 2019 

class Menu extends React.Component {
render() {
return(
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<div className="navbar-nav m-auto">
<div className="nav-item" >
<a className="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24"><path d="M3 4v16h18V4H3zm16 14H5V8h14v10z"/></svg>
LINK
</a>
</div>
</div>
</div>

);
}
}
class Navbar extends React.Component {
render() {
return (
<div className="navbar navbar-expand-lg navbar-light" style={{background: "whitesmoke",height:"90px" }}>
<a className="navbar-brand" href="#" style={{padding: "0"}}>
<div style={{display: "flex", width: "auto", height: "100px"}}>
<div style={{display: "block", height: "100px", width: "80px"}}>
<img src="https://img.icons8.com/dusk/64/000000/cat-profile.png" width="80px" height="80px" alt="" />  
</div>
<div style={{display: "block", height: "100px", paddingTop: "20px" }}>
<span style={{display: "flex", fontSize: "24px", marin: "0px", textAlign: "center"}}>BRAND</span>
<span style={{display: "flex", fontSize: "12px", color: "blue", textAlign: "center", padding: "0 2px" }}>Brand Tagline Here</span>
</div>
</div>
</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<Menu />
</div>
);
}
}
ReactDOM.render(
    <Navbar />, document.getElementById('content')
);
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<head>
<body>
<div id="content">
<a href="https://icons8.com/icon/49574/profile">Profile icon by Icons8</a></div>
</body>

<html>

Я использую реагирование и загрузку через CDN, и я хочу иметь панель навигации с изображениями SVG перед навигационными ссылками. Как добавить цвет заливки в svg при наведении курсора?

Я создал navbar как компонент, обертку меню как компонент, но я хочу заполнить svg и соответствующее навигационное меню вместе

1 Ответ

1 голос
/ 05 ноября 2019

Попробуйте добавить немного CSS или SASS, например a:hover, svg:hover { fill: red; color: red !important; }. 

class Menu extends React.Component {
render() {
return(
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<div className="navbar-nav m-auto">
<div className="nav-item" >
<a className="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24"><path d="M3 4v16h18V4H3zm16 14H5V8h14v10z"/></svg>
LINK
</a>
</div>
</div>
</div>

);
}
}
class Navbar extends React.Component {
render() {
return (
<div className="navbar navbar-expand-lg navbar-light" style={{background: "whitesmoke",height:"90px" }}>
<a className="navbar-brand" href="#" style={{padding: "0"}}>
<div style={{display: "flex", width: "auto", height: "100px"}}>
<div style={{display: "block", height: "100px", width: "80px"}}>
<img src="https://img.icons8.com/dusk/64/000000/cat-profile.png" width="80px" height="80px" alt="" />  
</div>
<div style={{display: "block", height: "100px", paddingTop: "20px" }}>
<span style={{display: "flex", fontSize: "24px", marin: "0px", textAlign: "center"}}>BRAND</span>
<span style={{display: "flex", fontSize: "12px", color: "blue", textAlign: "center", padding: "0 2px" }}>Brand Tagline Here</span>
</div>
</div>
</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<Menu />
</div>
);
}
}
ReactDOM.render(
    <Navbar />, document.getElementById('content')
);
a:hover, svg:hover { fill: red; color: red !important; }
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <head>

    <body>
      <div id="content">
        <a href="https://icons8.com/icon/49574/profile">Profile icon by Icons8</a></div>
    </body>

    <html>
...