#

 

 

Ich benötige für meine Asp Anwendung in der Ausgabe Seite in HTML ein Curosor verhalten, bei dem man wenn man mit der Maus über einen Textblock fährt,

der Textblock farblich aktiv angezeigt wird und link-aktiv ist.

 

Aktiver Link-DIV:Hover Block

 

Css-Class erstellen

Wenn man einen Div Hover Block benötigt,

dann muss man vor dem eigentliche DIV Tag einen Style-Block erstellen, in welche man eine CSS Klasse definiert.

Mit .Punkt beginnend bedeutet, dass es als class="" für folgende HTML Elemente zur Verfügung steht

Der Teil :hover bedeutet, dass das Verhalten aktiv wird, wenn man mit der Maus über das entspechende HTML Element fährt. Bei einem DIV-Block ist der komplette Panel-Bereich betroffen.

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

 

Jetzt muss man nur noch die Klasse in dem zu verwendenden DIV-Tag einfügen

<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 Seite

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

.