Как убрать обводку картинки при нажатии на неё?

Question

Джамал

веб-разработка , css , html , javascript

Как убрать обводку картинки при нажатии на неё?

Как убрать рамку, которая появляется вокруг изображения при его нажатии, чтобы отображалась только сама картинка? Вот код: <br/> <br/> <pre><code class="html">&lt;!DOCTYPE html&gt;
&lt;html lang="ru"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Site test&lt;/title&gt;
    &lt;link rel="icon" type="image/svg+xml" href="/favicon.ico"&gt;
    &lt;link rel="stylesheet" href="/static/css/styles.css"&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="root"&gt;&lt;/div&gt;
    &lt;script src="https://unpkg.com/react@17/umd/react.development.js"&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/babel-standalone@6/babel.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/babel" src="/static/js/app.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre> <br/> <br/> <pre><code class="javascript">const { useState, useEffect } = React;

function App() {
    const [showCase, setShowCase] = useState(false);
    const [caseNumber, setCaseNumber] = useState(null);
    const [isOpening, setIsOpening] = useState(false);

    const handleSection1Click = () =&gt; {
        setShowCase(true);
        setCaseNumber(null);
    };

    const handleCaseClick = () =&gt; {
        if (!isOpening) {
            setIsOpening(true);
            setTimeout(() =&gt; {
                const randomNumber = Math.floor(Math.random() * 100) + 1;
                setCaseNumber(randomNumber);
                setIsOpening(false);
            }, 2000);
        }
    };

    return (

18 сентября 2024 г. 9:53

Ответы на вопрос 2

Похожие вопросы

Answer 1

Чтобы убрать обводку вокруг изображения при нажатии на него, вы можете использовать CSS стиль `outline: none;`. 

Вы можете добавить этот стиль непосредственно к элементу изображения (например, `<img>`), либо применить его к любому родительскому элементу, если изображение находится внутри ссылки или другого контейнера, который может создавать обводку.

Например, если ваше изображение выглядит так:

```html
<img src="path/to/image.jpg" alt="Изображение" onClick={handleCaseClick} />
```

Вы можете создать CSS стиль, чтобы убрать обводку:

```css
img {
    outline: none; /* Убираем обводку */
}
```

Или, если обводка появляется при использовании тега `<a>` вокруг изображения, вы можете применить стиль так:

```css
a {
    outline: none; /* Убираем обводку у ссылки */
}
```

Не забудьте добавить этот CSS в ваш файл стилей или в `<style>` теги вашей HTML страницы. Например, добавить в `<head>` вашего HTML:

```html
<style>
    img {
        outline: none; /* Убираем обводку */
    }
</style>
```

Если вы используете React и вам необходимо сделать это с помощью встроенного стиля, вы можете сделать так:

```jsx
<img 
    src="path/to/image.jpg" 
    alt="Изображение" 
    onClick={handleCaseClick} 
    style={{ outline: 'none' }} 
/>
```

Эти изменения должны помочь избавиться от обводки вокруг картинки при её нажатии.

Answer 2

.case-wrapper {
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

.case-wrapper:focus {
    outline: none;
    box-shadow: none;
}

.case-wrapper::-moz-focus-inner {
    border: 0;
}