Gliding over the problem with the Azure line

https://i.sstatic.net/7N3hO.jpg

Is there a way to hide the opacity and font on hover? I have tried using outline: 0; in my CSS but there is still a blue line lingering. Any ideas on how to remove it?

If you need to see the code and the issue I'm describing, here it is:

p {
  font-size: 45px;
  padding: 142px 0;
  border-radius: 10px;
  outline: 0;
}

p:hover {
  color: rgba(255, 255, 255, 0);
  background-color: rgba(255, 255, 255, 0);
}
<div class="container painting-container">
  <div class="row">
    <div class="border-box col-xs-12 col-sm-12 col-md-6">
      <a href="#">
        <div class="box-image canvas-main">
          <P>CANVAS</P>
        </div>
      </a>
    </div>
    <div class="border-box col-xs-12 col-sm-12 col-md-6">
      <a href="#">
        <div class="box-image wood-main">
          <P>WOOD</P>
        </div>
      </a>
    </div>
  </div>
</div>

htmlcss

Answer №1

If you're looking to apply underline to a link, use the 'text-decoration' property on the anchor element, not the paragraph element. Here's an example:

p {
        font-size: 45px;
        border-radius: 10px;
        outline: 0;
    }
    p:hover {
        color: rgba(255, 255, 255, 0);
        background-color: rgba(255, 255, 255, 0);
    }

a:hover {
      text-decoration: none;
}
<div class="container painting-container">
    <div class="row">
        <div class="border-box col-xs-12 col-sm-12 col-md-6">
            <a href="#">
                <div class="box-image canvas-main">
                    <p>CANVAS</p>
                </div>
            </a>
        </div>
        <div class="border-box col-xs-12 col-sm-12 col-md-6">
            <a href="#">
                <div class="box-image wood-main">
                    <p>WOOD</p>
                </div>
            </a>
        </div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Example of Utilizing Google Places API

The Issue I've been struggling to make this google maps API example function correctly. Even after directly copying the code from Google's website, the example fails to display properly. For instance, the map doesn't show up, the search bar ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

My array magically transforms into an object once it reaches 22 elements, why is that happening? (node)

While working on a form with multiple checkboxes that have the same name and submitting it through a node/express post route, I encountered an issue. Here is the corresponding HTML code: https://pastebin.com/xeQae6GA The problem arises when trying to ret ...

htmlarraysnode.jsformsexpress

The component next/image is experiencing issues when used in conjunction with CSS

I struggled to create a border around an image because the custom CSS I wrote was being overridden by the Image component's CSS. Despite trying to leverage Tailwind and Bootstrap to solve the problem, my efforts were unsuccessful. Now, I am at a loss ...

javascriptcssnext.jsnextjs-image

Developing tabbed sections in XSLT

Utilizing Angular JS within XSLT, I am aiming to develop a tab-based user interface using XML data. The requirement is to generate multiple links and corresponding div elements based on the number of nodes in the XML. To manage the display of these div ele ...

xmlangularjshtmlxslt

Stylish HTML table with personalized CSS styling

Can anyone help me figure out how to properly format a table using HTML and CSS? I've been struggling with this task for hours... I'm having trouble organizing the rows in the table to match the layout shown in the image below. All items should b ...

htmlcss

Is there a way in Ruby to extract the inner HTML of the <title> tag by loading the HTML source code of a webpage into a string and then parsing it?

Currently, I am trying to extract the inner HTML of the <body> tag from an HTML source string using Ruby. Does anyone know how this can be achieved? Despite my attempts to find a solution, I have been unsuccessful so far. Any guidance would be grea ...

htmlruby

Techniques for preventing background layering using CSS

I have implemented a background image on the <input type="submit"> element to give it the appearance of a button. My CSS code looks like this: input.button { background-image:url(/path/to/image.png); } Furthermore, I would like to display a dif ...

iphonecsssafarifirefox4

Values do not appear as expected post PDF conversion using wkhtmltopdf

Currently, I am updating certain values within my HTML page by following this process: The function: function modifyContent(){ var newTitle = document.getElementById('myTextField1').value; if( newTitle.length==0 ){ alert('Plea ...

javascriptphphtmlpdfwkhtmltopdf

Generate real-time dynamic line charts using data pulled directly from a MySQL database

I am in search of guidance on developing a real-time line chart that can dynamically update based on data fetched from MySQL. I need an example or reference on how to achieve this functionality without having to refresh the webpage every time new data is ...

javascripthtmlmysql

Display a loading screen while transitioning between routes in Angular 2

Is there a way to implement a loading screen for route changes in Angular 2? ...

htmlcssangularangular2-routing

Enhance the speed of my Tumblr page by using JavaScript for personalized styling tweaks

-- Hey there! Dear Reader, if navigating Tumblr isn't your cup of tea, let me know and I'll provide more detailed instructions! I recently ran into some glitches on my Tumblr page while using the default theme 'Optica'. Whenever I tri ...

javascriptjqueryhtmlcsstumblr

By default, the select option in AngularJS will have a value of either an object or null

This block of code is located in the js file: $scope.ListOption = []; $scope.ListOption.push({ Value: "0", Name: Car }); $scope.ListOption.push({ Value: "1", Name: House }); Below is the corresponding HTML code: <select class="form-control" id="Categ ...

javascriptangularjshtml

Is there a way to update an image dynamically within CSS using the :before pseudo-element?

I am attempting to dynamically change the background image, but I am having trouble accessing the wrapper before "wrapper:before{}" from jQuery $('.wrapper:before) .wrapper:before { content: ""; position: fixed; left: 0; right: 0; z-index: -1; displa ...

jqueryhtmlcss

Enhance your website's user experience with jQuery by implementing smooth scrolling alongside

I have a fixed header at the top of my page. When it scrolls, I want to ensure that it does not cover or hide any of my content, especially the top portion of the section. // This code enables smooth scrolling (source: css-tricks) $('a[href*="#"]:no ...

jqueryhtmlcss

Place a fresh banner on top of the Ionicon icon

I recently started using Ionicons from and I am not too familiar with css. My question is, can a banner that says 'new' be overlaid on the top right corner of the Icon? Is there a simple or standard method to achieve this? (whether it's an ...

htmlcssfaviconionicons

What is the best way to place an element above another without disrupting the layout of the document?

I have a scenario where I am layering a black div on top of a red div using absolute positioning. Subsequently, additional content is displayed. p { position: relative; z-index; 10 } .wrapper { position: relative; } #red { height: 300px; w ...

htmlcss

Arranging rows within the Zurb Foundation grid structure

As a newcomer to Zurb Foundation 5, I am currently experimenting with building a complex header bar using columns and rows. My goal is to utilize nested rows within a main row, but I am having difficulty figuring out the correct div ordering. Is it feasib ...

cssresponsive-designframeworkszurb-foundationgrid-layout

I'm having an issue with Internet Explorer where the link doesn't function properly when I enclose the content within an <a> tag. Could anyone

I understand that this might not be the preferred approach, but a customer has requested live text wrapped in just one HTML tag.... Here's the challenge I'm facing: I currently have some code structured like this: <a href="google.com"> ...

html

What is the best way to showcase this information within my columns?

I'm facing an issue with VueJS. I have a large dataset that I want to display in columns in a specific order. How can I properly insert the code for this? Thank you for any assistance. [ { "sort": 0, "title": "My title", "description": ...

htmlvue.jsvuejs2

Creating a Masonry Gallery without any spacing between images

I'm looking to create a unique masonry gallery design that eliminates any gaps between images. I've experimented with various plugins like masonry and isotope, but they still leave gaps in the layout. Packery seems promising, however it tends to ...

jquerycssjquery-isotopemasonrypackery