Free Code Snippets in C#, Net Framework, Office 365, ASP.Net,WPF, Visual Studio, SQL Server, Antivirus free
#

 

 

I need a curosor behaviors for my asp application in the output page in HTML, where if you move your mouse over a text block,

the text block is displayed in color and is left-active.

 

Active Link DIV: Hover Block

 

Create css class

If you need a div hover block,

then you have to create a style block before the actual DIV tag, in which you define a CSS class.

Starting with .point means that it is available as class = "" for the following HTML elements

The part: hover means that the behavior becomes active when you move the mouse over the corresponding HTML element. A DIV block affects the entire panel area.

.div-hover:hover{background-color:rgb(182, 255, 0) ;}

 

Now you just have to insert the class in the DIV tag you want to use

<Div class="div-hover" >

 

<style>

   .div-hover:hover{background-color:rgb(182, 255, 0) ;}       

</style>

 

<a href="~/Notes/Details123" >

    <Div class="div-hover" >

       text

    </Div>

</a>

 

 

 

 

 

 

Html Razor page

In HTML Asp Net Core MVC View

@model IEnumerable<IWois_Core.Models.Notes_Index_DataModel>

 

@{

    ViewData["Title"] = "Blog Notes";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

 

<table class="table">

    <tr>

        <td style="vertical-align:bottom;">

            <a href="~/Notes/Create" title="Create a Note, Letter, Document" style="font-size:large ">

                + Notiz schreiben..

            </a>

        </td>

    </tr>

</table>

 

 

@*------< Loop: Details >--------*@

@foreach (var item in Model)

{

    <br />

    @*----< row >----*@

 

    <style>

        .div-hover:hover{background-color:rgb(182, 255, 0) ;}       

    </style>

 

       

    <a href="~/Notes/Details/@item.Note.IDNote" title="@Html.DisplayFor(modelItem => item.Note.DtCreated): @Html.DisplayFor(modelItem => item.Note.Title)">

 

        <Div class="div-hover" style="width:90%; display: block;   padding: 12px;    box-shadow: 0 2px 3px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.1);

            transition: box-shadow 3s ease-in-out; border-radius: 4px; outline: none;">

            <table>

                <tr>

                    <td style="width:100px;vertical-align:top;">

                        @*---< Left >----*@

                        <table>

                            <tr>

                                <td style="text-align:left;font-size: 12px; color: #757575;">

 

                                    @Html.DisplayFor(modelItem => item.Note.DtCreated)

                                </td>

                                <td style="text-align:left;font-size: 12px; color: #757575;">

                                    @Html.DisplayFor(modelItem => item.Sum_Views)

 

                                </td>

                            </tr>

                        </table>

                        @*---</ Left >----*@

                    </td>

 

                    <td style="width:auto;text-align:center ">

                        @*---< right >----*@

                        <table style="width:100%">

                            <tr>

                                <td style="text-align:left;font-size:large;">

                                    @Html.DisplayFor(modelItem => item.Note.Title)

                                </td>

                            </tr>

                            <tr>

                                <td style="text-align:left;font-size: 12px; color: #757575;">

 

                                    @Html.DisplayFor(modelItem => item.Note.Text)

 

                                </td>

                            </tr>

                        </table>

                        @*---< right >----*@

                    </td>

 

                </tr>

            </table>

        </Div>

        </a>

        @*----</ row >----*@

        }

        @*------</ Loop: Details >--------*@

 

 

 

Mobile
»
HTML: Move the position of an element only up to a certain position
»
Javascript: attach event to all children
»
Asp: Display image refreshed despite browser cache
»
Show Emoticons as Black and White Graphics
»
jQuery Example: Convert text to number, swap image
»
How can I copy something to the clipboard with a button from a web page?
»
Javascript: how to get the URL of the current website
»
Javascript: Query dialog OK Cancel
»
Bilder automatisch in der Größe anpassen mit CSS
»
Javascript: change style in javascript

.

Contact for Jobs, Project Requests: raimund.popp@microsoft-programmierer.de