Unable to adjust the height of the border when hovering over a P tag

Why doesn't the P tag text and border height increase work when it is hovered over by a mouse? What could be causing this issue?

Here is the HTML code snippet:

<body>
    <div class="cheap">
        <p id= "pen">hello hannan .hello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannanhello hannan</p>

    </div>

</body>

CSS: 

.cheap {
    width:500px;
    height: 500px;
    border: 1px solid rgb(25%,55%,45%);
    height: 10px;
}
 p{

 display: none;

}

.cheap:hover {
    width:400px;
    height:500px;

}

p:hover {
    display: block;
}

Find the Code Here

Answer №1

Here's a simple solution you can try:

.affordable:hover p{
display:block;
}

Add this code to the end of your CSS file.

Check out the demo here

Consider this: if the paragraph is set to display none, how can you hover over it?

Answer №2

This piece of CSS code will do the trick for you. In your current CSS setup, the P element is initially hidden using display:none, so in order to show it on hover, you need to target the .cheap class.

.cheap {
    width:500px;
    height: 500px;
    border: 1px solid rgb(25%,55%,45%);
    height: 10px;
}
.cheap p{
 display: none;
}

.cheap:hover {
    width:400px;
    height:500px;
}

.cheap:hover p {
    display: block;
}

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

Scraping the web with Python: Selenium HTML elements may differ from what is shown in the inspect tool

In my current academic project, I am facing an issue with scraping news articles from websites. The problem arises when parsing HTML code in Python because the code obtained from the page source is different from what is shown in the Inspect Element tool. ...

Vuetify Autocomplete that allows for adding values not in the predefined list

I am utilizing a vuetify autocomplete component to showcase a list of names for users to select from. In the case where a user enters a name not on the list, I want to ensure that value is still accepted. Check out my code snippet below: <v-autocomplete ...

Make the header stretch to the top of the page using CSS rounded edges

I'm trying to eliminate the white space above my blue header on a webpage with rounded corners. The header is at the top of the wrapper, but there's some empty space before it starts. Is there a way to make the header start right at the top edge ...

Using PHP to Generate and Compress CSS Files

Whenever a user visits the page, I dynamically generate CSS from files in this manner: <?php header("Content-type: text/css"); $styles = array( 'default', 'reset', 'notifybar', 'jqui' ); if (isse ...

Why doesn't the background color display properly when the div height is set to auto?

When I set the height of #container to auto, the background-color does not display. However, when I set it to a fixed height like 1000px, it shows up. I've attempted using "overflow:auto", but that did not solve the issue. How can I fix this? I want # ...

Tips for aligning div columns in HTML and CSS

My divs are displaying different heights based on content. I need a solution to make them all the same height without using bootstrap framework. Is there a way to achieve this with plain html/css, or perhaps with javascript/jquery/angularjs? Take a look ...

Tips for locating and clicking the 'Start' button in HTML using either find_element_by_xpath or the Selenium-Python API

Need help selecting the 'Start' button and clicking it in the HTML code below. I want to do this using the python-selenium library like so: driver.find_element_by_xpath('//div[contains(@class,"box enter")' ...

Enabling overflow-y with the value of auto allows the child element to be

I'm having an issue with a parent element and a child element in my CSS code. The parent has the following properties: position: relative; overflow-y: unset; And the child has these properties: position: relative; left: -70px; Everything looks good ...

Is it possible to create a button function in HTML that can alter the CSS image tag?

Is there a way I could create a function that can retrieve a value, update an image source, and then incrementally select another value? It would be incredibly helpful if you could provide a reference where I could learn how to do this or explain it in det ...

Rendering High-quality Images in Internet Explorer Browser

Currently, I am working on optimizing my website for high resolution monitors, particularly the new iPad. The site is already formatted to my liking, with images having increased resolutions while still fitting into specific DIVs. For instance, an image wi ...

Leveraging reframe.js to enhance the functionality of HTML5 video playback

I'm struggling with using the reframe.js plugin on a page that includes HTML5 embedded video. When I try to use my own video file from the same folder, it doesn't work as expected. While everything seems to be working in terms of the page loadin ...

Developing a touch-enabled mobile keypad with jquery

I've developed a number keypad with Javascript. Each time a button is clicked, the following actions are taken: List of buttons: <input type="button" value="2' class="num-key" onclick="insertvalue(this.value)"> <input type="button" valu ...

Tips for revealing a hidden div by clicking on another div?

I have a Google visualization chart inside a div tag. I would like to display this chart in a pop-up box when clicking on the chart's div. I am utilizing jQuery for this feature. ...

Is there a way to adjust the alignment of the placeholder text to the top of a sizable input field?

Here is how my code currently appears: https://i.sstatic.net/WwXd2.png I am trying to align the text at the top of the input text field. I have attempted using align-text-top, align-top, and creating a custom class with vertical-align: top; and vertical ...

What is the best way to identify if a file is HTML based on the URL?

Is there a way to determine if the file referenced in a URL is an html file? We know it's an html file if it ends in .html or /, but what about .jsp files and other possible extensions for html? If this information can be obtained easily from a URL ...

The functionality of BASE64 encoding in HTML appears to be malfunctioning

I have exhausted all options in my attempt to display an image using a base64 string, but none of them seem to be working. I have tested it on IE6,7, Firefox 3. Can someone please point out what is wrong with the code below? <head> <STYLE type ...

Issue with CSS Scroll Bar

I recently incorporated an Accordion and Slideshow feature into my website located at However, when clicking Play on either feature, a scroll bar unexpectedly appears causing the page to shift. I suspect that I may have forgotten to set the height for a ...

Aligning list items with Bootstrap

I am struggling with aligning Sheet3 and Science vertically left in a list with checkboxes. Currently, Science goes below the checkbox and I need a solution to fix this alignment issue. https://i.sstatic.net/bxoBT.png Any guidance on how to adjust the al ...

Tips for deactivating the double class with jQuery

I need to implement a feature where all classes on a button are disabled if a specific class is present. I attempted to disable all classes, but it seems like I made an error somewhere. Jquery: if ($('.lgi_btn_cta_toggle').hasClass('lgi_ct ...

What could be the reason for the <ul> and <li> tags showing up on my website's DOM?

I'm attempting to showcase cards on my webpage, but the text I'm displaying contains some code snippets like the one illustrated below: <div class="app"> <h1> All Fishes and Their Photos</h1> <ul v-for="(fi ...