

現在rails勉強中で、ブログアプリを作成しています。画像アイコンをルートに戻れるリンクにしているのですが、その画像アイコンをホバーすると下線が表示されます。

**これを出ないようにするにはどうしたらいいでしょうか？**  
調べた方法を試したのですが、うまくいきません。  
cssを以下のようにするといった内容はよく見ましたが、うまくいきません。

> text-decoration: none;  
>  border: none;

現在の画面とcssの実装です。（cssは試している最中です）  
▼application.html.erb

[code]

    <!DOCTYPE html>
    <html>
      <head>
        <title>HerokuApp</title>
        <%= csrf_meta_tags %>
        <%= csp_meta_tag %>
    
        <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
        <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
      </head>
    
      <body>
        <div class="container">
          <%= link_to image_tag('icon.jpg', class: 'logo'), root_path %>
          <%= yield %>
        </div>
      </body>
    </html>
    
[/code]

▼application.html.erb

[code]

    /*
     * This is a manifest file that'll be compiled into application.css, which will include all the files
     * listed below.
     *
     * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
     * vendor/assets/stylesheets directory can be referenced here using a relative path.
     *
     * You're free to add application-wide styles to this file and they'll appear at the bottom of the
     * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
     * files in this directory. Styles in this file should be added after the last require_* statement.
     * It is generally better to create a new file per style scope.
     *
     *= require_tree .
     *= require_self
     */
     .container {
         width: 400px;
         margin: 20px auto;
     }
    
     body {
         font-family: Verdana, sans-serif;
         font-size: 14px;
     }
    
     h2 {
         font-size: 16px;
         padding-bottom: 10px;
         margin-bottom: 15px;
         border-bottom: 1px solid #ddd;
     }
    
     ul>li {
         margin-bottom: 5px;
     }
    
     .logo {
         width: 10%;
         height: 10%;
     }
    
     a:hover {
         text-decoration: none;
         border: none;
     }
    
     a {
         text-decoration: none;
         border: none;
     }
    
[/code]

わかる方いらっしゃいましたらよろしくお願い致します。


CC BY-SA 4.0
2020-12-30T04:35:23.963
72977
2020-12-30T07:42:05.910
2020-12-30T07:42:05.910
40231
40231
question
ruby-on-rails html css
画像のリンクをhoverした際に下線が出るのを防ぎたい


menewさんにご返答いただき解消できました。

どうやら下線のように思えていたものは、背景色がはみ出しているようでした。  
以下のように修正すれば解決できました。

> a:hover {  
>  background-color: transparent;  
>  }

▼application.html.erb

[code]

    /*
     * This is a manifest file that'll be compiled into application.css, which will include all the files
     * listed below.
     *
     * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
     * vendor/assets/stylesheets directory can be referenced here using a relative path.
     *
     * You're free to add application-wide styles to this file and they'll appear at the bottom of the
     * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
     * files in this directory. Styles in this file should be added after the last require_* statement.
     * It is generally better to create a new file per style scope.
     *
     *= require_tree .
     *= require_self
     */
     .container {
         width: 400px;
         margin: 20px auto;
     }
    
     body {
         font-family: Verdana, sans-serif;
         font-size: 14px;
     }
    
     h2 {
         font-size: 16px;
         padding-bottom: 10px;
         margin-bottom: 15px;
         border-bottom: 1px solid #ddd;
     }
    
     ul>li {
         margin-bottom: 5px;
     }
    
     .logo {
         width: 10%;
         height: 10%;
     }
    
     a:hover {
         background-color: transparent;
     }
    
[/code]


CC BY-SA 4.0
2020-12-30T07:41:43.653
72981
2020-12-30T07:41:43.653
40231
72977
answer